Code HTML :
<p id="count">
</p>
<p>
checkbox newsletter :
</p>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly">
<input type="checkbox" name="newsletter" value="Daily">
<input type="checkbox" name="newsletter" value="Weekly">
<input type="checkbox" name="newsletter" checked="checked" value="Monthly">
<input type="checkbox" name="newsletter" value="Yearly">
</form>
<p>
checkbox check[] :
</p>
<form>
<input type="checkbox" name="check[]" value="one">
<input type="checkbox" name="check[]" value="two">
<input type="checkbox" name="check[]" value="three">
<input type="checkbox" name="check[]" value="four">
<input type="checkbox" name="check[]" value="five">
<input type="checkbox" name="check[]" value="six">
<input type="checkbox" name="check[]" value="seven">
<input type="checkbox" name="check[]" value="eight">
<input type="checkbox" name="check[]" value="nine">
<input type="checkbox" name="check[]" value="ten">
</form>
<p id="values">
</p>
Code JS :
var nameCheck = function nameCheck(){
var tab = [];
$( "input[name='check[]']:checked" ).each( function( i, item ){
tab.push( $( item ).val() );
});
$( "#values" ).text( "check[] = " + tab.join( ', ' ) );
return false;
},
countChecked = function countChecked(){
// Compter l'ensemble des éléments checked
var n = $( "input:checked" ).length;
$( "#count" ).text( n + ( n <= 1 ? " is" : " are" ) + " checked !" );
};
$( ":checkbox" ).on( "click", function(){
countChecked();
nameCheck();
});
countChecked();
À noter que l'on pourrait aussi bien récupérer les ID ou un "array" littéral avec les ID en index. On peut aussi le décliner pour les "select" multiples avec l'attribut "selected" au lieu de "checked".