Valintaruutu on valintaruutu, jonka avulla käyttäjät voivat tehdä binäärivalinnan (tosi tai epätosi) valitsemalla sen ja poistamalla valinnan. Pohjimmiltaan valintaruutu on kuvake, jota käytetään usein GUI-lomakkeissa ja sovelluksissa yhden tai useamman syötteen saamiseksi käyttäjältä.
- Jos valintaruutu on merkitty tai valittu, se osoittaa, että totta ; tämä tarkoittaa, että käyttäjä on valinnut arvon.
- Jos valintaruutua ei ole merkitty tai se ei ole valittuna, se osoittaa väärä ; tämä tarkoittaa, että käyttäjä ei ole valinnut arvoa.
Muista se -valintaruutu eroaa valintanapista ja avattavasta luettelosta, koska se sallii useita valintoja kerralla. Sitä vastoin valintanappi ja pudotusvalikko antavat meille mahdollisuuden valita vain yhden annetuista vaihtoehdoista.
foreach konekirjoitus
Tässä luvussa näemme nyt kuinka saada kaikki merkityt valintaruutujen arvot käyttämällä JavaScript .
Luo valintaruudun syntaksi
Luo valintaruutu käyttämällä HTML-välilehteä ja type='checkbox' välilehden sisällä alla olevan kuvan mukaisesti -
Yes
Vaikka voit myös luoda valintaruudun luomalla valintaruutuobjektin JavaScriptin kautta, mutta tämä menetelmä on hieman monimutkainen. Keskustelemme molemmista lähestymistavoista myöhemmin -
Esimerkkejä
Luo ja hanki valintaruudun arvo
Tässä esimerkissä luomme kaksi valintaruutua, mutta sillä ehdolla, että käyttäjän on merkittävä vain yksi valintaruutu niiden väliin. Sitten haemme merkityn valintaruudun arvon. Katso alla oleva koodi:
lataa video youtube vlc:stä
Kopioi koodi
<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> Testaa nyt Lähtö
Jos merkitset Joo -valintaruutu ja napsauta sitten Lähetä -painiketta, näkyviin tulee alla olevan kuvan mukainen viesti:
Jos napsautat Lähetä -painiketta merkitsemättä yhtäkään valintaruutua, näyttöön tulee virheilmoitus.
Vastaavasti voit tarkistaa lähdön muiden ehtojen varalta.
silmukalle javassa
Hae kaikki valintaruudun arvot
Nyt näet, kuinka saada kaikki käyttäjän merkitsemät valintaruutujen arvot. Katso alla oleva esimerkki.
Kopioi koodi
<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> Testaa nyt Lähtö
Täällä voit nähdä, että kaikkien merkittyjen valintaruutujen arvot on palautettu.
Eri JavaScript-koodit saadaksesi merkittyjen valintaruutujen arvon
JavaScript-koodi saadaksesi kaikki valitut valintaruutujen arvot
Pyspark sql
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Voit myös käyttää alla olevaa koodia saadaksesi kaikki valittujen valintaruutujen arvot.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Joten valintaruutuelementit sallivat monivalinnan. Tämä tarkoittaa, että käyttäjät voivat valita yhden tai useamman HTML-lomakkeessa määritellyn vaihtoehdon. Voit jopa valita kaikki valintaruudut. Yllä olevassa esimerkissä olet jo nähnyt sen.