De :checked selector
De selector :checked selecteert elementen
die zijn geselecteerd, dat wil zeggen, elementen die de attributen
checked of
selected hebben.
De selector :checked werkt met selectievakjes
(checkbox) en
keuzerondjes
(radio),
evenals voor elementen met de tag
option.
Om alleen de geselecteerde opties van
select elementen te krijgen,
gebruik je de selector
:selected.
Syntaxis
Zo selecteren we elementen met het
attribuut checked:
$(':checked');
Voorbeeld
Laten we, bij elke selectie van een selectievakje, het aantal geselecteerde selectievakjes weergeven. Zoals je ziet, zullen voor je eerste klik de selectievakjes worden weergegeven die standaard zijn geselecteerd, dit zijn de tweede en de vierde:
<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('Geselecteerd: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Voorbeeld
Laten we bij een klik onderaan de waarde van elk geselecteerd keuzerondje weergeven:
<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 geselecteerd!');
});
