Sélecteur checked
Le sélecteur :checked sélectionne les éléments
qui sont cochés, c'est-à-dire ceux qui ont les attributs
checked ou
selected.
Le sélecteur :checked fonctionne avec les cases à cocher
(checkbox) et
les boutons radio
(radio),
ainsi que pour les éléments avec la balise
option.
Pour obtenir uniquement les options sélectionnées des éléments
select,
utilisez le sélecteur
selected.
Syntaxe
Voici comment nous sélectionnons les éléments avec
l'attribut checked:
$(':checked');
Exemple
Faisons en sorte qu'à chaque fois qu'une case est cochée, nous affichions le nombre de cases cochées. Comme vous pouvez le voir avant votre premier clic, les cases cochées par défaut seront affichées, ce sont les deuxième et quatrième :
<form>
<p>
<input type="checkbox" name="cbox" value="one">
<input type="checkbox" name="cbox" value="two" checked="checked">
<input type="checkbox" name="cbox" value="three">
<input type="checkbox" name="cbox" value="four" checked>
<input type="checkbox" name="cbox" value="five">
</p>
</form>
<div></div>
div {
color: green;
}
let countChecked = function() {
let n = $('input:checked').length;
$('div').text('Checked: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Exemple
Faisons en sorte qu'au clic nous affichions en bas la valeur de chaque bouton radio sélectionné :
<form>
<div>
<input type="radio" name="digits" value="one" id="one">
<label for="one">one</label>
</div>
<div>
<input type="radio" name="digits" value="two" id="two">
<label for="two">two</label>
</div>
<div>
<input type="radio" name="digits" value="three" id="three">
<label for="three">three</label>
</div>
<div id="text"></div>
</form>
input, label {
line-height: 1.5em;
}
$('input').on('click', function() {
$('#text').html($('input:checked').val() + ' is checked!');
});
