10
How many checkboxes is being selected and count. Selected 1, mark 1, selected another mark +1, took 1 mark -1. I would like to count.
6 answers
10
That’s the code you need:
$('input[type=checkbox]:checked').length
If you want to run every time one is changed you can use it like this:
$('input[type=checkbox]').on('change', function () {
var total = $('input[type=checkbox]:checked').length;
alert(total);
});
Example: http://jsfiddle.net/5fuzV/ Documentation: http://api.jquery.com/checked-selector/
6
I will leave a suggested implementation
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'));
});
-
In this code how not to let count the checkboxes that were as "disabled"
-
1
That would be http://jsfiddle.net/WsTjc/3/ @Fabiohenrique ?
-
exactly that
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);
Example: Jsfiddle
Reference:
5
A simple way to do this is through the new jQuery property, so you need to add a "key" class to your checkbox in order to be able to check:
$('.checkbox').prop('checked', true);
$('.checkbox').prop('checked', false);
4
With CSS counters you can "set a variable" to be incremented whenever a rule marries. In case, how do you want to count how many <input> are with the attribute :checked true, enough:
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)
}
could be used with the checkbox value that is in dataTables
Browser other questions tagged javascript jquery html
You are not signed in. Login or sign up in order to post.
I used your code, only it counts twice. I mark a checkbox, and it gives me an Alert 2x with the number 1
– Alisson Acioli
@Alissonacioli alert 2x? No. It fires an Alert when the check box changes. One by one...
– Sergio
here it is giving 2 Alert when I select or deselect some.
– Alisson Acioli
@Alissonacioli in which browser you are in?
– Sergio
Google Chrome .... In Alert() is giving twice, but I put a $("#Count"). html(total) and he’s doing it right, it should be pq ta catching the last 2x result
– Alisson Acioli
@Alissonacioli strange it make two Alerts. It has some loaded library that is making a "Mask" input?
– Sergio
No. But it’s working as I want, no problem.
– Alisson Acioli
@Sergio I asked a question at the finish because, I was asked about a copy of your code if you want to leave your opinion at the goal please: http://meta.pt.stackoverflow.com/q/1631/6026
– user6026
It shouldn’t be necessary, but perhaps because you’re using Alert() it might be looking like something that it really isn’t. Try this second revision, of the same code, and see if the problem persists.
– Bruno Augusto