Uma caixa de seleção é uma caixa de seleção que permite aos usuários fazer a escolha binária (verdadeiro ou falso) marcando e desmarcando-a. Basicamente, uma caixa de seleção é um ícone frequentemente usado em formulários GUI e aplicativos para obter uma ou mais entradas do usuário.
- Se uma caixa de seleção estiver marcada ou marcada, ela indica verdadeiro ; isso significa que o usuário selecionou o valor.
- Se uma caixa de seleção estiver desmarcada ou não marcada, ela indica falso ; isso significa que o usuário não selecionou o valor.
Lembre-se disso A caixa de seleção é diferente do botão de opção e da lista suspensa porque permite várias seleções ao mesmo tempo. Por outro lado, o botão de opção e o menu suspenso nos permitem escolher apenas uma das opções fornecidas.
Neste capítulo, agora veremos como obter todos os valores das caixas de seleção marcadas usando JavaScript .
Criar sintaxe de caixa de seleção
Para criar uma caixa de seleção, use a guia HTML e digite = 'checkbox' dentro da guia, conforme mostrado abaixo -
formulário completo do cdr
Yes
Embora você também possa criar uma caixa de seleção criando o objeto de caixa de seleção por meio de JavaScript, esse método é um pouco complicado. Discutiremos ambas as abordagens mais tarde-
listagem java
Exemplos
Crie e obtenha o valor da caixa de seleção
Neste exemplo, criaremos dois checkboxes mas com a condição de que o usuário terá que marcar apenas um checkbox entre eles. Então buscaremos o valor da caixa de seleção marcada. Veja o código abaixo:
Copiar código
<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> Teste agora Saída
Se você marcar o Sim caixa de seleção e clique no botão Enviar botão, uma mensagem será exibida conforme mostrado abaixo:
Se você clicar no Enviar sem marcar nenhuma das caixas de seleção, uma mensagem de erro será exibida.
Da mesma forma, você pode verificar a saída para outras condições.
lista c#
Obtenha todos os valores da caixa de seleção
Agora, você verá como obter todos os valores das caixas de seleção marcadas pelo usuário. Veja o exemplo abaixo.
Copiar código
<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> Teste agora Saída
números bloqueados
Aqui, você pode ver que todos os valores das caixas de seleção marcadas foram retornados.
Diferentes códigos JavaScript para obter o valor das caixas de seleção marcadas
Código JavaScript para obter todos os valores das caixas de seleção marcadas
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Você também pode usar o código abaixo para obter todos os valores das caixas de seleção marcadas.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Portanto, os elementos da caixa de seleção permitem a seleção múltipla. Isso significa que os usuários podem selecionar uma ou mais opções de sua preferência definidas no formulário HTML. Até você pode marcar todas as caixas de seleção. No exemplo acima, você já viu isso.