Pemilih checked
Pemilih :checked memilih elemen-elemen
yang ditanda, iaitu elemen yang mempunyai atribut
checked atau
selected.
Pemilih :checked berfungsi dengan kotak semak
(checkbox) dan
penukar radio
(radio),
dan juga untuk elemen dengan tag
option.
Untuk mendapatkan hanya pilihan yang ditanda bagi elemen
select,
gunakan pemilih
selected.
Sintaks
Beginilah cara kita memilih elemen dengan
atribut checked:
$(':checked');
Contoh
Mari, setiap kali kotak semak dipilih, paparkan bilangan kotak semak yang ditanda. Seperti yang anda lihat sebelum klik pertama anda, kotak semak yang ditanda secara lalai akan dipaparkan, iaitu kotak semak 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('Ditanda: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Contoh
Mari paparkan di bahagian bawah nilai setiap penukar radio yang ditanda apabila 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() + ' ditanda!');
});
