Checkad selektor
Selektorn :checked väljer element
som är markerade, det vill säga de som har attributen
checked eller
selected.
Selektorn :checked fungerar med kryssrutor
(checkbox) och
alternativknappar
(radio),
samt för element med taggen
option.
För att endast få utvalda alternativ i element
select,
använd selektorn
selected.
Syntax
Så här väljer vi element med
attributet checked:
$(':checked');
Exempel
Låt oss, vid varje val av kryssruta, visa antalet markerade kryssrutor. Som du ser före din första klickning kommer kryssrutorna som är markerade som standard att visas, det är den andra och fjärde:
<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('Markerade: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Exempel
Låt oss vid klickning visa värdet för varje vald alternativknapp längst ner:
<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() + ' är markerad!');
});
