Quantos checkboxes está sendo selecionados e fazer uma contagem. Selecionou 1, marca 1, selecionou outro marca +1, tirou 1 marca -1. Gostaria de fazer uma contagem.
6 Respostas
Esse é o código que precisa:
$('input[type=checkbox]:checked').length
Se quiser correr a cada vez que um é mudado pode usar assim:
$('input[type=checkbox]').on('change', function () {
var total = $('input[type=checkbox]:checked').length;
alert(total);
});
Exemplo: http://jsfiddle.net/5fuzV/ Documentação: http://api.jquery.com/checked-selector/
-
Eu usei seu código, só que ele conta duas vezes. Eu marco um checkbox, e ele me da um alert 2x com o número 1 Commented 30/06/2014 às 18:01
-
@AlissonAcioli alerta 2x? Não. Ele dispara um alert quando a check box muda. Uma a uma...– SergioCommented 30/06/2014 às 18:03
-
aqui ele está dando 2 alert quando seleciono ou desmarco algum. Commented 30/06/2014 às 18:05
-
-
1Não. Mas está funcionando como eu quero, sem problemas. Commented 30/06/2014 às 18:19
Vou deixar uma sugestão de implementação
HTML
<label><input type="checkbox" name="ch" /> Opção</label>
<label><input type="checkbox" name="ch" /> Opção</label>
<label><input type="checkbox" name="ch" /> Opção</label>
<label><input type="checkbox" name="ch" /> Opção</label>
<label><input type="checkbox" name="ch" /> Opção</label>
<div id="contador" data-value="0">
</div>
CSS
label {display:block;}
#contador[data-value="0"]{
display:none; /*oculta qdo não houver nenhum selecionado*/
}
jQuery
$('input[type=checkbox]').on('change', function () {
//quantidade de selecionados
var qt = $('input[type=checkbox]:checked').length;
//coloca o atributo para ocultar qdo for 0
$('#contador').attr('data-value',qt);
//coloca o resultado na div contador
$('#contador').text(qt + (qt > 1 ? ' selecionados' : ' selecionado'));
});
-
Nesse codigo como não deixar contar os checkbox que estiveram como "disabled" Commented 4/01/2016 às 23:11
-
1
-
Html
<input type="checkbox" name="check1" value="1">
<input type="checkbox" name="check1" value="2">
<input type="checkbox" name="check1" value="3">
<input type="checkbox" name="check1" value="4">
<input type="checkbox" name="check1" value="5">
<div id="checkcount"></div>
Script (Javascript)
var contador = function() {
var n = $("input:checked").length;
$("#checkcount").text( n + (n === 1 ? " é" : " são") + " selecionados" );
};
contador();
$( "input[type=checkbox]" ).on( "click",contador);
Exemplo: JsFiddle
Referência:
Uma forma simplicada de fazer isso é através da nova propriedade do jQuery, pra isso você precisa adicionar uma classe "chave" nos seus checkbox para poder fazer a verificação:
$('.checkbox').prop('checked', true);
$('.checkbox').prop('checked', false);
Com CSS counters você pode "definir uma variável" para ser incrementada sempre que uma regra casar. No caso, como você quer contar quantos <input>
estão com o atributo :checked
verdadeiro, basta:
input:checked {
counter-increment: checked-inputs
}
h2::after {
content: 'Itens marcados: ' counter(checked-inputs)
}
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<h2></h2>
input {
counter-increment: total-items
}
input:checked {
counter-increment: checked-items total-items
}
h2::after {
content: counter(checked-items) ' de ' counter(total-items)
}
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<h2></h2>
input {
counter-increment: total-items
}
input:checked {
counter-increment: checked-items total-items
}
h2::after {
content: counter(checked-items) ' de ' counter(total-items)
}
teria como utilizar com valor do checkBox que esta no dataTables