Een selectievakje is een selectievak waarmee gebruikers de binaire keuze (waar of onwaar) kunnen maken door deze aan of uit te vinken. Kortom, een selectievakje is een pictogram dat vaak wordt gebruikt in GUI-formulieren en -applicaties om een of meer invoer van de gebruiker te krijgen.
string.format in Java
- Als een selectievakje is gemarkeerd of aangevinkt, geeft dit aan dat dit het geval is WAAR ; dit betekent dat de gebruiker de waarde heeft geselecteerd.
- Als een selectievakje niet is gemarkeerd of niet is aangevinkt, wordt dit aangegeven vals ; dit betekent dat de gebruiker de waarde niet heeft geselecteerd.
Onthoud dat Het selectievakje verschilt van het keuzerondje en de vervolgkeuzelijst omdat het meerdere selecties tegelijk mogelijk maakt. Met het keuzerondje en de vervolgkeuzelijst kunnen we daarentegen slechts één van de gegeven opties kiezen.
In dit hoofdstuk zullen we nu zien hoe u alle gemarkeerde selectievakjes kunt ophalen met behulp van JavaScript .
Maak een syntaxis van selectievakjes
Om een selectievakje aan te maken, gebruikt u het HTML-tabblad en typt u='checkbox' in het tabblad, zoals hieronder weergegeven -
Yes
Hoewel je ook een checkbox kunt maken door het checkbox-object via JavaScript te maken, is deze methode een beetje ingewikkeld. We zullen beide benaderingen later bespreken
Voorbeelden
Creëer en ontvang checkbox-waarde
In dit voorbeeld maken we twee selectievakjes, maar met de voorwaarde dat de gebruiker slechts één selectievakje ertussen hoeft aan te vinken. Vervolgens halen we de waarde van het gemarkeerde selectievakje op. Zie de onderstaande code:
Kopieer code
<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> Test het nu Uitvoer
Als u de Ja selectievakje in en klik vervolgens op de Indienen knop, wordt een bericht weergegeven zoals hieronder weergegeven:
Als u klikt op de Indienen zonder een van de selectievakjes aan te vinken, wordt er een foutmelding weergegeven.
Op dezelfde manier kunt u de uitvoer controleren op andere omstandigheden.
Ontvang alle selectievakjeswaarde
Nu zult u zien hoe u alle selectievakjeswaarden kunt laten markeren door de gebruiker. Zie het onderstaande voorbeeld.
verbinding krijgen
Kopieer code
<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> Test het nu Uitvoer
Hier kunt u zien dat alle gemarkeerde selectievakjeswaarde is geretourneerd.
Verschillende JavaScript-codes om de waarde van gemarkeerde selectievakjes te krijgen
JavaScript-code om alle aangevinkte selectievakjeswaarden op te halen
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } U kunt ook de onderstaande code gebruiken om alle aangevinkte selectievakjeswaarden op te halen.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Checkbox-elementen maken dus meervoudige selectie mogelijk. Dit betekent dat de gebruikers een of meer opties naar keuze kunnen selecteren, gedefinieerd in het HTML-formulier. Zelfs u kunt alle selectievakjes selecteren. In bovenstaand voorbeeld heb je dat al gezien.