En avmerkingsboks er en valgboks som lar brukerne gjøre det binære valget (sant eller usant) ved å merke av og fjerne merket for det. I utgangspunktet er en avmerkingsboks et ikon, som ofte brukes i GUI-skjemaer og applikasjoner for å få en eller flere input fra brukeren.
- Hvis en avkrysningsboks er merket eller avkrysset, indikerer den til ekte ; dette betyr at brukeren har valgt verdien.
- Hvis en avkrysningsboks er umerket eller ikke merket, indikerte den til falsk ; dette betyr at brukeren ikke har valgt verdien.
Husk at avkrysningsboksen er forskjellig fra alternativknappen og rullegardinlisten fordi den tillater flere valg samtidig. Derimot lar alternativknappen og rullegardinmenyen oss bare velge én fra de gitte alternativene.
fibonacci-serien i ca
I dette kapittelet vil vi nå se hvordan du får alle merkede avkrysningsboksverdier ved å bruke JavaScript .
Opprett avkrysningsbokssyntaks
For å lage en avmerkingsboks, bruk HTML-fanen og skriv='checkbox' inne i fanen som vist nedenfor -
Yes
Selv om du også kan opprette en avkrysningsboks ved å opprette avkrysningsboksobjektet gjennom JavaScript, men denne metoden er litt komplisert. Vi vil diskutere begge tilnærmingene senere-
Eksempler
Opprett og få avkrysningsboksverdi
I dette eksemplet vil vi lage to avmerkingsbokser, men med betingelsen om at brukeren bare må merke av én avkrysningsboks mellom dem. Deretter henter vi verdien av den merkede avmerkingsboksen. Se koden nedenfor:
Kopier 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 nå Produksjon
Hvis du markerer Ja avkrysningsboksen og klikk deretter på Sende inn -knappen, vil en melding vises som vist nedenfor:
Hvis du klikker på Sende inn uten å merke noen av avmerkingsboksene, vil en feilmelding vises.
På samme måte kan du sjekke utgangen for andre forhold.
Få all avkrysningsboksverdi
Nå vil du se hvordan du får alle avkrysningsboksverdier merket av brukeren. Se eksemplet nedenfor.
er modelleksempler
Kopier 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 nå Produksjon
Her kan du se at alle merkede avmerkingsbokser har blitt returnert.
Ulike JavaScript-koder for å få merkede avmerkingsbokser verdi
JavaScript-kode for å få alle avmerkede verdier
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å bruke koden nedenfor for å få alle avmerkede verdier.
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å, avmerkingsbokselementer lar deg velge flere. Dette betyr at brukerne kan velge ett eller flere valg etter eget valg definert i HTML-skjemaet. Selv du kan velge alle avmerkingsboksene. I eksemplet ovenfor har du allerede sett det.