Checked selektorius
Selektorius :checked pasirenka elementus,
kurie yra pažymėti, tai yra tuos, kurie turi atributus
checked arba
selected.
Selektorius :checked veikia su varnelėmis
(checkbox) ir
radijo mygtukais
(radio),
taip pat su elementais, turinčiais žymę
option.
Kad gautumėte tik pasirinktas elementų
select parinktis,
naudokite selektorių
selected.
Sintaksė
Taip mes pasirenkame elementus su
atributu checked:
$(':checked');
Pavyzdys
Leiskite, kiekvieną kartą pažymint varnelę, rodyti pažymėtų varnelių skaičių. Kaip matote, iki jūsų pirmo paspaudimo bus rodomos pagal nutylėjimą pažymėtos varnelės, tai yra antroji ir ketvirtoji:
<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('Pažymėta: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Pavyzdys
Leiskite paspaudus rodyti apačioje kiekvieno pasirinkto radijo mygtuko reikšmę:
<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!');
});
