Селектор checked

:checked селектору тандалган элементтерди тандайт, башкача айтканда, алар checked же selected атрибуттарына ээ. :checked селектору чекбокс менен (checkbox) радио баскычтары менен (radio), ошондой эле option теги бар элементтер менен иштейт. select элементтеринин гана тандалган опцияларын алуу үчүн, selected селекторун колдонуңуз.

Синтаксис

Биз ушинтип checked атрибуту бар элементтерди тандайбыз:

javascript$(':checked');

Мисал

Ар бир чекбокс тандалганда, тандалган чекбокстардын санын көрсөтөлү. Биринчи чыкылдатууңуздан мурун, ыңгайлаштырылгандай тандалган чекбокстар көрсөтүлөт, бул экинчи жана төртүнчү чекбокстар:

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('Тандалган: ' + n);
};
countChecked();

$('input[type=checkbox]').on('click', countChecked);

Мисал

Чыкылдатуу менен ар бир тандалган радио баскычтын маанисин ылдый көрсөтөлү:

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() + ' тандалды!');
});

Ошондой эле караңыз