Checked-selector
Selectoren :checked vælger elementer,
der er valgt, det vil sige dem, som har attributterne
checked eller
selected.
Selectoren :checked fungerer med checkbokse
(checkbox) og
radio knapper
(radio),
samt for elementer med tagget
option.
For kun at få de valgte muligheder fra elementer med
select,
anvend selectoren
selected.
Syntaks
Sådan vælger vi elementer med
attributten checked:
$(':checked');
Eksempel
Lad os ved hvert valg af en checkbox vise antallet af valgte checkbokse. Som du kan se, vil der før dit første klik blive vist checkbokse, valgt som standard, det er den anden og fjerde:
<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('Valgte: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Eksempel
Lad os ved klik vises nedenunder værdien af hver valgt radio knap:
<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() + ' er valgt!');
});
