O casetă de selectare este o casetă de selecție care permite utilizatorilor să facă alegerea binară (adevărat sau fals) bifând-o și debifând-o. Practic, o casetă de selectare este o pictogramă, care este folosită frecvent în formularele și aplicațiile GUI pentru a obține una sau mai multe intrări de la utilizator.
- Dacă o casetă de selectare este bifată sau bifată, aceasta indică pentru Adevărat ; aceasta înseamnă că utilizatorul a selectat valoarea.
- Dacă o casetă de selectare este nemarcată sau nu este bifată, aceasta a indicat fals ; aceasta înseamnă că utilizatorul nu a selectat valoarea.
Sa nu uiti asta caseta de selectare este diferită de butonul radio și lista derulantă, deoarece permite selecții multiple simultan. În schimb, butonul radio și meniul drop-down ne permit să alegem doar una dintre opțiunile date.
În acest capitol, acum vom vedea cum să obținem toate valorile casetei de selectare marcate folosind JavaScript .
Creați sintaxa casetei de selectare
Pentru a crea o casetă de selectare, utilizați fila HTML și tastați='checkbox' în interiorul filei, așa cum se arată mai jos -
Yes
Deși puteți crea și o casetă de selectare prin crearea obiectului casetă de selectare prin JavaScript, dar această metodă este puțin complicată. Vom discuta ambele abordări mai târziu -
Exemple
Creați și obțineți valoarea casetei de selectare
În acest exemplu, vom crea două casete de selectare, dar cu condiția ca utilizatorul să fie nevoit să marcheze o singură casetă de selectare între ele. Apoi vom prelua valoarea casetei de selectare marcate. Vezi codul de mai jos:
Copiați codul
<h2>Create a checkbox and get its value</h2> <h3> Are you a web developer? </h3> Yes: No: <br> <br> Submit <br> <h4> <h4> function checkCheckbox() { var yes = document.getElementById('myCheck1'); var no = document.getElementById('myCheck2'); if (yes.checked == true && no.checked == true){ return document.getElementById('error').innerHTML = 'Please mark only one checkbox either Yes or No'; } else if (yes.checked == true){ var y = document.getElementById('myCheck1').value; return document.getElementById('result').innerHTML = y; } else if (no.checked == true){ var n = document.getElementById('myCheck2').value; return document.getElementById('result').innerHTML = n; } else { return document.getElementById('error').innerHTML = '*Please mark any of checkbox'; } } </h4></h4> Testează-l acum Ieșire
Dacă marcați da caseta de selectare și apoi faceți clic pe Trimite butonul, se va afișa un mesaj după cum se arată mai jos:
Dacă faceți clic pe Trimite fără a bifa niciuna dintre casetele de selectare, va fi afișat un mesaj de eroare.
În mod similar, puteți verifica ieșirea pentru alte condiții.
Obțineți toată valoarea casetei de selectare
Acum, veți vedea cum să obțineți toate valorile casetei de selectare marcate de utilizator. Vezi exemplul de mai jos.
Copiați codul
<h2>Create a checkbox and get its value</h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> Check all <br> <br> Submit <br> <h4></h4> function checkAll() { var inputs = document.querySelectorAll('.pl'); for (var i = 0; i <inputs.length; i++) { inputs[i].checked="true;" } function getcheckboxvalue() var l1="document.getElementById('check1');" l2="document.getElementById('check2');" l3="document.getElementById('check3');" l4="document.getElementById('check4');" l5="document.getElementById('check5');" l6="document.getElementById('check6');" res=" " ; if (l1.checked="=" true){ pl1="document.getElementById('check1').value;" + ','; else (l2.checked="=" pl2="document.getElementById('check2').value;" (l3.checked="=" document.write(res); pl3="document.getElementById('check3').value;" (l4.checked="=" pl4="document.getElementById('check4').value;" (l5.checked="=" pl5="document.getElementById('check5').value;" (l6.checked="=" pl6="document.getElementById('check6').value;" pl6; return document.getelementbyid('result').innerhtml="You have not selected anything" ' languages'; < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>By executing this code, we will get a response like the below screenshot having some programming languages where you can choose the language you know.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-3.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Here, you click on the <strong>Check all</strong> button, it will mark all the programming language checkboxes. After that, click on the <strong>Submit</strong> button to get the response.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-4.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Although you can select the language one by one by marking an individual checkbox and then click on the <strong>Submit</strong> button to get the result.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-5.webp" alt="How to get all checked checkbox value in JavaScript"> <p> <strong>Output: When you have not selected anything</strong> </p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-6.webp" alt="How to get all checked checkbox value in JavaScript"> <h2>Get all marked checkboxes value using querySelectorAll() method</h2> <p>There is one more method to get all selected values from the checkboxes marked by the user. You will now see how to get the value of all checkboxes using the querySelectorAll() method marked by the user. This will fetch the checkboxes values from the HTML form and display the result.</p> <h3>Get all checkbox value</h3> <p>Now, you will see how to get all checkbox values marked by the user. See the below example.</p> <p> <strong>Copy Code</strong> </p> <pre> <h2> Get all marked checkboxes value </h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> <br> <br> Submit <br> <h4></h4> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </tr></pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>Here, you can see that all marked checkboxes value has been returned.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-7.webp" alt="How to get all checked checkbox value in JavaScript"> <h3>Different JavaScript codes to get marked checkboxes value</h3> <p>JavaScript Code to get all checked checkbox values</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </pre> <p>You can also use the below code to get all checked checkboxes values.</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } </pre> <p>So, checkbox elements allow to multi-select. This means that the users can select one or more options of their choice defined in the HTML form. Even you can select all the checkboxes. In the above example, you have already seen that.</p> <hr></inputs.length;></tr> Testează-l acum Ieșire
Aici, puteți vedea că toate casetele de selectare marcate au fost returnate.
Diferite coduri JavaScript pentru a obține valoarea casetelor de selectare marcate
Cod JavaScript pentru a obține toate valorile casetei de selectare bifate
inteligență artificială și agenți inteligenți
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } De asemenea, puteți utiliza codul de mai jos pentru a obține toate valorile casetelor de selectare bifate.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Deci, elementele casetei de selectare permit selecția multiplă. Aceasta înseamnă că utilizatorii pot selecta una sau mai multe opțiuni la alegere definite în formularul HTML. Chiar și tu poți bifa toate casetele de selectare. În exemplul de mai sus, ați văzut deja asta.