Žymimasis laukelis yra pasirinkimo laukelis, leidžiantis vartotojams pasirinkti dvejetainį pasirinkimą (teisingą arba klaidingą), jį pažymint ir panaikinant žymėjimą. Iš esmės žymimasis laukelis yra piktograma, kuri dažnai naudojama GUI formose ir programoje, norint gauti vieną ar daugiau vartotojo įvesties.
- Jei žymimasis laukelis yra pažymėtas arba pažymėtas, tai reiškia, kad tiesa ; tai reiškia, kad vartotojas pasirinko vertę.
- Jei žymimasis laukelis nepažymėtas arba nepažymėtas, jis nurodomas klaidinga ; tai reiškia, kad vartotojas nepasirinko vertės.
Prisiminti, kad žymimasis laukelis skiriasi nuo radijo mygtuko ir išskleidžiamojo sąrašo, nes leidžia vienu metu pasirinkti kelis. Priešingai, radijo mygtukas ir išskleidžiamasis meniu leidžia pasirinkti tik vieną iš pateiktų parinkčių.
Šiame skyriuje dabar pamatysime, kaip gauti visos pažymėtos žymės langelio reikšmės naudojant JavaScript .
Sukurti žymės langelio sintaksę
Norėdami sukurti žymimąjį laukelį, naudokite HTML skirtuką ir tipas='checkbox' skirtuko viduje, kaip parodyta toliau -
Yes
Nors jūs taip pat galite sukurti žymimąjį laukelį sukurdami žymės langelio objektą naudodami JavaScript, tačiau šis metodas yra šiek tiek sudėtingas. Abu būdus aptarsime vėliau –
dvejetainių medžių rūšys
Pavyzdžiai
Sukurkite ir gaukite žymimojo laukelio vertę
Šiame pavyzdyje sukursime du žymimuosius laukelius, tačiau su sąlyga, kad vartotojas turės pažymėti tik vieną žymimąjį laukelį tarp jų. Tada gausime pažymėto žymės langelio reikšmę. Žiūrėkite žemiau esantį kodą:
Kopijuoti kodą
<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> Išbandykite dabar Išvestis
Jei pažymėsite Taip žymimąjį laukelį, tada spustelėkite Pateikti mygtuką, bus rodomas pranešimas, kaip parodyta žemiau:
Jei paspausite ant Pateikti mygtuką nepažymėjus nė vieno iš žymimųjų laukelių, bus rodomas klaidos pranešimas.
Panašiai galite patikrinti išvestį dėl kitų sąlygų.
Gauti visą žymimąjį laukelį
Dabar pamatysite, kaip gauti visas vartotojo pažymėtas žymės langelio reikšmes. Žiūrėkite žemiau esantį pavyzdį.
Kopijuoti kodą
<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> Išbandykite dabar Išvestis
Čia galite pamatyti, kad visų pažymėtų žymimųjų laukelių reikšmė buvo grąžinta.
Skirtingi „JavaScript“ kodai, norint gauti pažymėtų žymimųjų laukelių vertę
„JavaScript“ kodas, kad gautumėte visas pažymėtas žymimųjų laukelių vertes
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Taip pat galite naudoti toliau pateiktą kodą, kad gautumėte visas pažymėtų žymimųjų laukelių reikšmes.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Taigi, žymės langelio elementai leidžia pasirinkti kelis. Tai reiškia, kad vartotojai gali pasirinkti vieną ar daugiau pasirinkimų, apibrėžtų HTML formoje. Netgi galite pažymėti visus žymimuosius laukelius. Aukščiau pateiktame pavyzdyje tai jau matėte.
csv failų skaitymas java