Селектори 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!');
});
