A jelölőnégyzet egy olyan jelölőnégyzet, amely lehetővé teszi a felhasználók számára a bináris választás (igaz vagy hamis) kiválasztását a bejelölésével és a bejelölés törlésével. Alapvetően a jelölőnégyzet egy ikon, amelyet gyakran használnak a grafikus felhasználói felület űrlapjaiban és az alkalmazásokban, hogy egy vagy több adatot kapjanak a felhasználótól.
- Ha egy jelölőnégyzet be van jelölve vagy be van jelölve, az azt jelzi, hogy igaz ; ez azt jelenti, hogy a felhasználó kiválasztotta az értéket.
- Ha egy jelölőnégyzet nincs bejelölve, vagy nincs bejelölve, azt jelzi hamis ; ez azt jelenti, hogy a felhasználó nem választotta ki az értéket.
Emlékezz arra jelölőnégyzet eltér a választógombtól és a legördülő listától, mert egyszerre több kijelölést tesz lehetővé. Ezzel szemben a rádiógomb és a legördülő menü segítségével csak egyet választhatunk a megadott lehetőségek közül.
Ebben a fejezetben most azt fogjuk látni, hogyan lehet az összes megjelölt jelölőnégyzet értékét lekérni JavaScript .
Jelölőnégyzet szintaxis létrehozása
Jelölőnégyzet létrehozásához használja a HTML lapot, és írja be a lapon belül a következőt:
Yes
Bár a checkbox objektum JavaScript-en keresztüli létrehozásával is létrehozhat jelölőnégyzetet, de ez a módszer kissé bonyolult. Mindkét megközelítést később tárgyaljuk.
Példák
A jelölőnégyzet értékének létrehozása és lekérése
Ebben a példában két jelölőnégyzetet fogunk létrehozni, de azzal a feltétellel, hogy a felhasználónak csak egy jelölőnégyzetet kell bejelölnie közöttük. Ezután lekérjük a bejelölt jelölőnégyzet értékét. Lásd az alábbi kódot:
Kód másolása
<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> Tesztelje most Kimenet
Ha megjelöli a Igen jelölőnégyzetet, majd kattintson a Beküldés gombot, az alábbi üzenet jelenik meg:
Ha rákattint a Beküldés gombot anélkül, hogy bármelyik jelölőnégyzetet bejelölné, hibaüzenet jelenik meg.
Hasonlóképpen ellenőrizheti a kimenetet egyéb feltételekre.
Az összes jelölőnégyzet értékének lekérése
Most látni fogja, hogyan kaphatja meg a felhasználó által megjelölt összes jelölőnégyzet értékét. Lásd az alábbi példát.
Kód másolása
<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> Tesztelje most Kimenet
Itt láthatja, hogy az összes bejelölt jelölőnégyzet értéke visszaadásra került.
Különböző JavaScript kódok a megjelölt jelölőnégyzetek értékének eléréséhez
JavaScript kód az összes bejelölt jelölőnégyzet értékének lekéréséhez
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Az alábbi kódot is használhatja az összes bejelölt jelölőnégyzet értékének lekéréséhez.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Tehát a jelölőnégyzet elemei lehetővé teszik a többszörös kijelölést. Ez azt jelenti, hogy a felhasználók választhatnak egy vagy több opciót a HTML űrlapon definiálva. Még Ön is bejelölheti az összes jelölőnégyzetet. A fenti példában ezt már láthatta.