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:

javascript$(':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:

html<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>

cssdiv {
  color: green;
}

javascriptlet 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:

html<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>

cssinput, label {
  line-height: 1.5em;
}

javascript$('input').on('click', function() {
  $('#text').html($('input:checked').val() + ' tanlandi!');
});

Shuningdek qarang