Onay kutusu, kullanıcıların işaretleyerek ve işaretini kaldırarak ikili seçim (doğru veya yanlış) yapmasına olanak tanıyan bir seçim kutusudur. Temel olarak onay kutusu, kullanıcıdan bir veya daha fazla girdi almak için GUI formlarında ve uygulamalarında sıklıkla kullanılan bir simgedir.
- Bir onay kutusu işaretlenirse veya işaretlenirse, şunu belirtir: doğru ; bu, kullanıcının değeri seçtiği anlamına gelir.
- Bir onay kutusunun işareti kaldırılmışsa veya işaretlenmemişse, şunu belirtir: YANLIŞ ; bu, kullanıcının değeri seçmediği anlamına gelir.
Bunu hatırla onay kutusu, aynı anda birden fazla seçime izin verdiği için radyo düğmesinden ve açılır listeden farklıdır. Bunun aksine, radyo düğmesi ve açılır menü, verilen seçeneklerden yalnızca birini seçmemize olanak tanır.
Bu bölümde, şimdi tüm işaretli onay kutusu değerlerinin nasıl alınacağını göreceğiz. JavaScript .
Onay kutusu söz dizimi oluştur
Bir onay kutusu oluşturmak için HTML sekmesini kullanın ve aşağıda gösterildiği gibi sekmenin içine ='checkbox' yazın -
Yes
Onay kutusu nesnesini JavaScript aracılığıyla oluşturarak da bir onay kutusu oluşturabilirsiniz ancak bu yöntem biraz karmaşıktır. Her iki yaklaşımı da daha sonra tartışacağız.
Örnekler
Onay kutusu değeri oluştur ve al
Bu örnekte, kullanıcının aralarında yalnızca bir onay kutusunu işaretlemesi şartıyla iki onay kutusu oluşturacağız. Daha sonra işaretli onay kutusunun değerini getireceğiz. Aşağıdaki koda bakın:
c# dize içerir
Kodu Kopyala
<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> Şimdi Test Edin Çıktı
işaretlerseniz Evet onay kutusunu seçin ve ardından Göndermek düğmesine bastığınızda aşağıda gösterildiği gibi bir mesaj görüntülenecektir:
uzunluk dizisi
Eğer üzerine tıklarsanız Göndermek Onay kutularından herhangi birini işaretlemeden düğmesine basarsanız, bir hata mesajı görüntülenecektir.
Benzer şekilde, çıktıyı diğer koşullar için de kontrol edebilirsiniz.
Tüm onay kutusu değerini al
Artık kullanıcı tarafından işaretlenen tüm onay kutusu değerlerinin nasıl alınacağını göreceksiniz. Aşağıdaki örneğe bakın.
Kodu Kopyala
<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> Şimdi Test Edin Çıktı
Burada işaretli tüm onay kutularının değerinin döndürüldüğünü görebilirsiniz.
İşaretli onay kutularının değerini almak için farklı JavaScript kodları
İşaretli tüm onay kutusu değerlerini almak için JavaScript Kodu
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Tüm işaretli onay kutularının değerlerini almak için aşağıdaki kodu da kullanabilirsiniz.
ofset yüksekliği
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Böylece onay kutusu öğeleri çoklu seçime izin verir. Bu, kullanıcıların HTML formunda tanımlanan bir veya daha fazla seçeneği seçebilecekleri anlamına gelir. Hatta tüm onay kutularını seçebilirsiniz. Yukarıdaki örnekte bunu zaten gördünüz.