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