Et afkrydsningsfelt er et valgfelt, der giver brugerne mulighed for at foretage det binære valg (sandt eller falsk) ved at markere og fjerne markeringen af det. Grundlæggende er et afkrydsningsfelt et ikon, som ofte bruges i GUI-formularer og applikationer for at få et eller flere input fra brugeren.
- Hvis et afkrydsningsfelt er markeret eller markeret, angiver det til rigtigt ; det betyder, at brugeren har valgt værdien.
- Hvis et afkrydsningsfelt er umarkeret eller ikke markeret, indikerede det til falsk ; det betyder, at brugeren ikke har valgt værdien.
Huske på, at afkrydsningsfeltet er forskelligt fra alternativknappen og rullelisten, fordi det tillader flere valg på én gang. I modsætning hertil giver radioknappen og rullemenuen os mulighed for kun at vælge én fra de givne muligheder.
nginx
I dette kapitel vil vi nu se, hvordan du får alle markerede afkrydsningsfeltværdier ved hjælp af JavaScript .
Opret afkrydsningsfeltsyntaks
For at oprette et afkrydsningsfelt, brug HTML-fanen og skriv='checkbox' inde i fanen som vist nedenfor -
Yes
Selvom du også kan oprette et afkrydsningsfelt ved at oprette afkrydsningsfeltobjektet gennem JavaScript, men denne metode er lidt kompliceret. Vi vil diskutere begge tilgange senere-
Eksempler
Opret og få afkrydsningsfeltværdi
I dette eksempel vil vi oprette to afkrydsningsfelter, men med den betingelse, at brugeren kun skal markere ét afkrydsningsfelt mellem dem. Så henter vi værdien af det markerede afkrydsningsfelt. Se koden nedenfor:
Kopiér kode
<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 det nu Produktion
Hvis du markerer Ja afkrydsningsfeltet, og klik derefter på Indsend knappen, vises en meddelelse som vist nedenfor:
Hvis du klikker på Indsend uden at markere nogen af afkrydsningsfelterne, vil der blive vist en fejlmeddelelse.
På samme måde kan du kontrollere outputtet for andre forhold.
Få alle afkrydsningsfeltværdier
Nu vil du se, hvordan du får alle afkrydsningsfeltværdier markeret af brugeren. Se nedenstående eksempel.
er model examples
Kopiér kode
<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 det nu Produktion
Her kan du se, at alle markerede afkrydsningsfelter er blevet returneret.
Forskellige JavaScript-koder for at få markerede afkrydsningsfelter værdi
JavaScript-kode for at få alle afkrydsede afkrydsningsfeltværdier
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Du kan også bruge nedenstående kode til at få alle afkrydsede afkrydsningsfelter.
datoformat.format
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Så afkrydsningsfeltelementer gør det muligt at vælge flere. Det betyder, at brugerne kan vælge en eller flere muligheder efter eget valg defineret i HTML-formularen. Selv du kan markere alle afkrydsningsfelterne. I ovenstående eksempel har du allerede set det.