Selektor checked
Selektor :checked memilih elemen,
yang dipilih, yaitu elemen yang memiliki atribut
checked atau
selected.
Selektor :checked bekerja dengan kotak centang
(checkbox) dan
tombol radio
(radio),
serta untuk elemen dengan tag
option.
Untuk mendapatkan hanya opsi yang dipilih dari elemen
select,
gunakan selektor
selected.
Sintaks
Berikut cara kita memilih elemen dengan
atribut checked:
$(':checked');
Contoh
Mari, setiap kali kotak centang dipilih, tampilkan jumlah kotak centang yang dipilih. Seperti yang Anda lihat sebelum klik pertama Anda, kotak centang yang dipilih secara default akan ditampilkan, yaitu kotak kedua dan keempat:
<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);
Contoh
Mari tampilkan di bagian bawah nilai setiap tombol radio yang dipilih saat diklik:
<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!');
});
