Checked selektori
:checked selektori tanlangan elementlarni,
ya'ni checked yoki
selected atributlariga
ega bo'lgan elementlarni tanlaydi.
:checked selektori chekboxlar
(checkbox) va
radio tugmachalari
(radio)
bilan, shuningdek option
tegi bilan ishlaydi.
select elementlarining
faqat tanlangan opsiyalarini olish uchun,
selected
selektoridan foydalaning.
Sintaksis
checked atributiga ega elementlarni
shunday tanlaymiz:
$(':checked');
Misol
Keling, har bir chekboks tanlanganda, tanlangan chekbokslar sonini ko'rsataylik. Siz ko'rib turganingizdek, birinchi marta bosishingizgacha standart bo'yicha tanlangan chekbokslar, ya'ni ikkinchi va to'rtinchi chekbokslar ko'rsatiladi:
<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('Tanlanganlar: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Misol
Keling, bosish orqali pastda har bir tanlangan radio tugmasining qiymatini ko'rsataylik:
<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() + ' tanlandi!');
});
