Selektor checked
Selektor :checked wybiera elementy,
które są zaznaczone, czyli te, które mają atrybuty
checked lub
selected.
Selektor :checked działa z polami wyboru
(checkbox) i
przyciskami opcji
(radio),
a także dla elementów z tagiem
option.
Aby uzyskać tylko wybrane opcje elementów
select,
użyj selektora
selected.
Składnia
Tak wybieramy elementy z
atrybutem checked:
$(':checked');
Przykład
Przy każdym zaznaczeniu pola wyboru, wyświetlajmy liczbę zaznaczonych pól wyboru. Jak widzicie, przed waszym pierwszym kliknięciem będą wyświetlone pola wyboru, zaznaczone domyślnie, to drugie i czwarte:
<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('Zaznaczone: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Przykład
Po kliknięciu wyświetlajmy na dole wartość każdego zaznaczonego przycisku opcji:
<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() + ' jest zaznaczony!');
});
