Comment compter toutes les cases à cocher cochées
Voici mon code :
Il compte en fait les cases à cocher cochées et l'écrit à l'intérieur <span class="counter"></span>. Ce code fonctionne sur Firefox mais pas sur Chrome.
Sur Chrome, la .select_all coche toutes les cases que je veux, mais ne met pas à jour le compteur. En fait, le compteur est mis à jour quand je décoche le .select_all, ce qui est bizarre.
Fait IMPORTANT: Je ne veux pas compter le.Select_all cases à cocher dans mon .compteur
jQuery(document).ready(function($){
$(function() {
$('#general i .counter').text(' ');
var generallen = $("#general-content input[name='wpmm[]']:checked").length;
if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');}
})
$("#general-content input:checkbox").on("change", function() {
var len = $("#general-content input[name='wpmm[]']:checked").length;
if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
});
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false);
}
});
});
});
EDIT: voici un exemple de document du code : http://jsfiddle.net/8PVDy/1/
6 réponses
Vous pouvez utiliser une fonction pour mettre à jour le compteur :
function updateCounter() {
var len = $("#general-content input[name='wpmm[]']:checked").length;
if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
}
Et appelez cette fonction lorsque l'état d'une case à cocher est modifié (y compris les cases à cocher selectAll)
Voici un jsfiddle mis à jour: http://jsfiddle.net/8PVDy/4/
Vous pouvez le faire de cette façon
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
alert($('.test:checked').length);
});
});
HTML j'ai utilisé
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="checkAll" class="checkAll" value=""/>
J'espère que cela aide
Pour mettre à jour l'état vérifié, utilisez la jQuery .prop () Fonction
Code:
$(function(){
$('#general i .counter').text(' ');
var fnUpdateCount = function() {
var generallen = $("#general-content input[name='wpmm[]']:checked").length;
console.log(generallen,$("#general i .counter") )
if (generallen > 0) {
$("#general i .counter").text('(' + generallen + ')');
} else {
$("#general i .counter").text(' ');
}
};
$("#general-content input:checkbox").on("change", function() {
fnUpdateCount();
});
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $("#general-content input:checkbox");
if (checkthis.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
fnUpdateCount();
});
});
Démonstration: Violon
Essayez ceci.
$('.select_all').change(function() {
var num = $(this).find("input[name='wpmm[]']:checked").length;
$("#general .counter").html(num);
});
Modifié le select all-handler pour déclencher la fonction onchange pour les cases à cocher de la sous-catégorie comme ceci
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false);
}
// make sure to trigger the onchange behaviour for the checkboxes
$("#general-content input:checkbox").change();
});
})
Je semble me rappeler qu'il existe un moyen plus joli de les déclencher, mais je ne peux pas le trouver