Селектор checked
Селектор :checked танланган элементларни,
яъни checked ёки
selected атрибутларига
эга бўлган элементларни танлайди.
Селектор :checked чекбокслар
(checkbox) ва
радио тугмалари
(radio)
билан ишлайди, шунингдек
option тегига эга бўлган элементлар учун ҳам.
select элементларининг фақат танланган опцияларини олиш учун,
selected селекторини ишлатинг.
Синтаксис
checked атрибутига эга бўлган элементларни шундай танлаймиз:
$(':checked');
Мисол
Келинг, ҳар бир чекбокс танланганда, танланган чекбокслар сонини кўрсатамиз. Сиз кўриб турганингиздек, сизнинг биринчи кликингиздан олдин, сунъий холда танланган чекбокслар кўрсатилади, бу иккинчи ва тўртинчи чекбокслар:
<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('Checked: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Мисол
Келинг клик орқали қайси радио тугмаси танланган бўлса, унинг қийматини қуйида кўрсатамиз:
<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!');
});
