10

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 6

10

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/

9
  • 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 30/06/2014 às 18:01
  • @AlissonAcioli alerta 2x? Não. Ele dispara um alert quando a check box muda. Uma a uma...
    – Sergio
    30/06/2014 às 18:03
  • aqui ele está dando 2 alert quando seleciono ou desmarco algum. 30/06/2014 às 18:05
  • @AlissonAcioli em que browser você está?
    – Sergio
    30/06/2014 às 18:05
  • 1
    Não. Mas está funcionando como eu quero, sem problemas. 30/06/2014 às 18:19
6

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'));
});

JSFiddle

3
5

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:

0
5

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);
4

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>

0
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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .