Resumo : neste tutorial, você aprenderá como usar JavaScript para testar se uma caixa de seleção está marcada, obter os valores das caixas de seleção selecionadas e marcar/desmarcar todas as caixas de seleção.
Criando uma caixa de seleção HTML
Para criar uma caixa de seleção, você usa o <input>elemento com typeof checkboxda seguinte maneira:
<input type="checkbox" id="accept"> Accept Linguagem de código: HTML, XML ( xml )É uma boa prática sempre associar uma caixa de seleção a um rótulo para melhorar a usabilidade e a acessibilidade. Ao fazer isso, clicar no rótulo também marca ou desmarca a caixa de seleção.
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>Linguagem de código: HTML, XML ( xml )Ou:
<input type="checkbox" id="accept" name="accept" value="yes">
<label for="accept"> Accept </label>Linguagem de código: HTML, XML ( xml )Observe que o valor do atributo for do rótulo deve corresponder ao id da caixa de seleção.
O seguinte funciona, mas é uma prática ruim, então você deve evitá-lo:
<input type="checkbox" id="accept" name="accept" value="yes"> AcceptLinguagem de código: HTML, XML ( xml )Verificando se uma caixa de seleção está marcada
Uma caixa de seleção possui dois estados: marcada e desmarcada.
Para obter o estado de uma caixa de seleção, siga estas etapas:
- Primeiro, marque a caixa de seleção usando um método DOM como
getElementById()ouquerySelector(). - Em seguida, acesse a
checkedpropriedade do elemento checkbox. Se suacheckedpropriedade fortrue, então a caixa de seleção está marcada; caso contrário, não é.
Veja o exemplo a seguir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>
<script>
const cb = document.querySelector('#accept');
console.log(cb.checked); // false
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Neste exemplo:
Primeiro, crie o elemento HTML checkbox:
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>Linguagem de código: HTML, XML ( xml )Segundo, marque a caixa de seleção com id #accepte examine a checkedpropriedade:
const cb = document.querySelector('#accept');
console.log(cb.checked);Linguagem de código: JavaScript ( javascript )Como a caixa de seleção está desmarcada, você verá falseno console:
falseLinguagem de código: JavaScript ( javascript )Considere outro exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>
<script>
const checked = document.querySelector('#accept:checked') !== null;
console.log(checked); // false
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Neste exemplo, o seletor #accept:checkedseleciona o elemento com o id #accepte possui o atributo checked. Por exemplo, corresponde ao seguinte elemento:
<input type="checkbox" id="accept" checked> AcceptLinguagem de código: HTML, XML ( xml )Mas não este:
<input type="checkbox" id="accept"> AcceptLinguagem de código: HTML, XML ( xml )Portanto, se o elemento checkbox com o id #acceptestiver marcado, o document.querySelector()irá retorná-lo. Na janela do console, você verá o valor falseporque a caixa de seleção está desmarcada:
falseLinguagem de código: JavaScript ( javascript )Obtendo valores de caixa de seleção
A página a seguir mostra uma caixa de seleção e um botão. Ao clicar no botão, você verá o valor da caixa de seleção na janela do console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept"> Accept
</label>
<button id="btn">Submit</button>
<script>
const cb = document.querySelector('#accept');
const btn = document.querySelector('#btn');
btn.onclick = () => {
alert(cb.value);
};
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Ao obter o valueatributo de uma caixa de seleção, você sempre obtém a 'on'string, esteja a caixa de seleção marcada ou não.
Obtendo valores de múltiplas caixas de seleção selecionadas
A página a seguir mostra três caixas de seleção. Se você marcar uma ou mais caixas de seleção e clicar no botão, serão mostrados os valores da caixa de seleção selecionada:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite colors:</p>
<label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
<p>
<button id="btn">Get Selected Colors</button>
</p>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="color"]:checked');
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
alert(values);
});
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Como funciona.
No HTML, criamos três elementos checkbox com o mesmo nome (cor), mas valores distintos:
<label for="c1"><input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2">Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>Linguagem de código: HTML, XML ( xml )No JavaScript:
Primeiro, adicione o manipulador de eventos click ao botão:
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
// ...
}); Linguagem de código: JavaScript ( javascript )Segundo, marque as caixas de seleção selecionadas usando o document.querySelectorAll()método dentro do manipulador de eventos click:
let checkboxes = document.querySelectorAll('input[name="color"]:checked');Linguagem de código: JavaScript ( javascript )Terceiro, envie os valores das caixas de seleção selecionadas para um array:
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
alert(values);Linguagem de código: JavaScript ( javascript )Demonstração:
Marque/desmarque todas as caixas de seleção
A página a seguir possui três caixas de seleção e um botão. Ao clicar no botão, se as caixas de seleção estiverem marcadas, elas serão desmarcadas e vice-versa:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Check/uncheck checkboxes</title>
</head>
<body>
<p>
<button id="btn">Check / Uncheck All</button>
</p>
<label for="c1"><input type="checkbox" name="color" value="red" id="c1"> Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
<label for="c3"> <input type="checkbox" name="color" value="blue" id="c3">Blue</label>
<script>
function check(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function checkAll() {
select();
this.onclick = uncheckAll;
}
function uncheckAll() {
select(false);
this.onclick = checkAll;
}
const btn = document.querySelector('#btn');
btn.onclick = checkAll;
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Como funciona:
Primeiro, defina a check()função que marca ou desmarca todas as caixas de seleção com o nome "color":
function check(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}Linguagem de código: JavaScript ( javascript )Quando você clica no botão, ele marca todas as caixas de seleção. E. Se você clicar no botão novamente, todas as caixas de seleção deverão ser desmarcadas. Para fazer essa opção, você precisa reatribuir o manipulador de eventos de clique sempre que o evento de clique for acionado.
Segundo, selecione o #btnbotão e atribua a checkAll()função à onclickpropriedade do botão:
const btn = document.querySelector('#btn');
btn.onclick = checkAll;Linguagem de código: JavaScript ( javascript )Terceiro, defina a checkAll()função que marca todas as caixas de seleção:
function checkAll() {
check();
this.onclick = uncheckAll;
}
Linguagem de código: JavaScript ( javascript )Por fim, defina a uncheckAll()função que desmarca todas as caixas de seleção:
function uncheckAll() {
check(false);
this.onclick = checkAll;
}Linguagem de código: JavaScript ( javascript )Demonstração:
Criando caixas de seleção dinamicamente
O exemplo a seguir mostra como criar caixas de seleção dinamicamente usando JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<div id="root"></div>
<script>
const colors = ["Red","Green","Blue"];
colors.forEach((color)=>{
// generate id
const id = `color-${color}`;
// create a label
const label = document.createElement('label');
label.setAttribute("for", id);
// create a checkbox
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;
// place the checkbox inside a label
label.appendChild(checkbox);
// create text node
label.appendChild(document.createTextNode(color));
// add the label to the root
document.querySelector("#root").appendChild(label);
});
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Saída:
<div class="output-cont"><div class="output">
<iframe height="250px" src="https://tutorials.acervolima.com/sample/dom/checkbox/checkbox-dynamic.html"></iframe>
</div></div>Linguagem de código: HTML, XML ( xml )Como funciona.
Primeiro, defina um array que consiste em três strings. Na prática, você pode ter o array que vem do resultado de uma chamada de API:
const colors = ["Red","Green","Blue"];Linguagem de código: JavaScript ( javascript )Segundo, itere sobre os elementos da matriz e:
1) Gere um ID exclusivo para cada caixa de seleção:
const id = `color-${color}`;Linguagem de código: JavaScript ( javascript )2) Crie um rótulo e atribua o id ao atributo for:
const label = document.createElement('label');
label.setAttribute("for", id);Linguagem de código: JavaScript ( javascript )3) Crie uma caixa de seleção:
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;Linguagem de código: JavaScript ( javascript )4) Coloque a caixa de seleção dentro da etiqueta:
label.appendChild(checkbox);Linguagem de código: CSS ( css )5) Crie um nó de texto e anexe-o ao rótulo:
label.appendChild(document.createTextNode(color));Linguagem de código: CSS ( css )6) Adicione o rótulo ao elemento raiz:
document.querySelector("#root").appendChild(label);Linguagem de código: CSS ( css )O exemplo a seguir também gera caixas de seleção dinamicamente como no exemplo acima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<div id="root"></div>
<script>
const colors = ["Red","Green","Blue"];
const html = colors.map(color => `<label for="color-${color}">
<input type="checkbox" name="color" id="color-${color}" value="${color}"> ${color}
</label>`
).join(' ');
document.querySelector("#root").innerHTML = html;
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Neste exemplo:
- Primeiro, gere um elemento de rótulo e caixa de seleção usando o
map()método Array e literais de modelo . - Segundo, junte as strings HTML em um único HTML usando o
join()método String. - Terceiro, anexe o HTML ao
#rootelemento.
Resumo
- Use o
<input>elemento com o tipocheckboxpara criar um elemento de caixa de seleção. - Coloque uma caixa de seleção dentro de um elemento de rótulo para melhorar a usabilidade e acessibilidade.
- Use
checkbox.checkeda propriedade ou:checko seletor para testar se uma caixa de seleção está marcada. - Obtenha o
valueatributo para obter o valor de uma caixa de seleção.
