Sjekket selektor
Selektoren :checked velger elementer
som er valgt, det vil si de som har attributtene
checked eller
selected.
Selektoren :checked fungerer med avkrysningsbokser
(checkbox) og
radioknapper
(radio),
samt for elementer med taggen
option.
For å få kun valgte alternativer for elementer
select,
bruk selektoren
selected.
Syntaks
Slik velger vi elementer med
attributten checked:
$(':checked');
Eksempel
La oss, ved hvert valg av avkrysningsboks, vise antall valgte avkrysningsbokser. Som du ser før ditt første klikk vil avkrysningsboksene som er valgt som standard vises, dette er den andre 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('Valgt: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Eksempel
La oss ved klikk vise verdien av hver valgt radioknapp nederst:
<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!');
});
