Izvēles rūtiņa ir izvēles rūtiņa, kas ļauj lietotājiem izdarīt bināro izvēli (patiesa vai nepatiesa), atzīmējot to un noņemot atzīmi. Būtībā izvēles rūtiņa ir ikona, ko bieži izmanto GUI veidlapās un lietojumprogrammās, lai no lietotāja iegūtu vienu vai vairākas ievades.
- Ja izvēles rūtiņa ir atzīmēta vai atzīmēta, tas norāda uz taisnība ; tas nozīmē, ka lietotājs ir izvēlējies vērtību.
- Ja izvēles rūtiņa nav atzīmēta vai nav atzīmēta, tas norāda uz viltus ; tas nozīmē, ka lietotājs nav izvēlējies vērtību.
Atcerieties, ka izvēles rūtiņa atšķiras no radio pogas un nolaižamā saraksta, jo ļauj vienlaikus atlasīt vairākas atlases. Turpretim radio poga un nolaižamā izvēlne ļauj mums izvēlēties tikai vienu no dotajām opcijām.
Šajā nodaļā mēs redzēsim, kā iegūt visas atzīmētās izvēles rūtiņas vērtības, izmantojot JavaScript .
Izveidot izvēles rūtiņas sintaksi
Lai izveidotu izvēles rūtiņu, izmantojiet cilni HTML un cilnē type='checkbox', kā parādīts tālāk -
manuāla pārbaude
Yes
Lai gan jūs varat arī izveidot izvēles rūtiņu, izveidojot izvēles rūtiņas objektu, izmantojot JavaScript, taču šī metode ir nedaudz sarežģīta. Mēs apspriedīsim abas pieejas vēlāk -
Piemēri
Izveidojiet un iegūstiet izvēles rūtiņas vērtību
Šajā piemērā mēs izveidosim divas izvēles rūtiņas, bet ar nosacījumu, ka lietotājam starp tām būs jāatzīmē tikai viena izvēles rūtiņa. Pēc tam mēs iegūsim atzīmētās izvēles rūtiņas vērtību. Skatiet zemāk esošo kodu:
Kopēt kodu
java ir vienāds
<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> Izmēģiniet to tagad Izvade
Ja atzīmējat Jā izvēles rūtiņa un pēc tam noklikšķiniet uz Iesniegt pogu, tiks parādīts ziņojums, kā parādīts zemāk:
Ja noklikšķināsiet uz Iesniegt pogu, neatzīmējot nevienu izvēles rūtiņu, tiks parādīts kļūdas ziņojums.
Līdzīgi varat pārbaudīt izvadi attiecībā uz citiem apstākļiem.
masīvs java
Iegūt visu izvēles rūtiņu vērtību
Tagad jūs redzēsit, kā iegūt visas lietotāja atzīmētās izvēles rūtiņu vērtības. Skatiet zemāk redzamo piemēru.
Kopēt kodu
<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> Izmēģiniet to tagad Izvade
sarakstu šķirošana java
Šeit jūs varat redzēt, ka visu atzīmēto izvēles rūtiņu vērtība ir atgriezta.
Dažādi JavaScript kodi, lai iegūtu atzīmēto izvēles rūtiņu vērtību
JavaScript kods, lai iegūtu visas atzīmētās izvēles rūtiņas vērtības
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Varat arī izmantot tālāk norādīto kodu, lai iegūtu visas atzīmētās izvēles rūtiņas.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Tātad izvēles rūtiņas elementi ļauj atlasīt vairākas reizes. Tas nozīmē, ka lietotāji pēc savas izvēles var izvēlēties vienu vai vairākas opcijas, kas definētas HTML formātā. Pat jūs varat atzīmēt visas izvēles rūtiņas. Iepriekš minētajā piemērā jūs to jau redzējāt.