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:

javascript$(':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:

html<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>

cssdiv {
  color: green;
}

javascriptlet 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:

html<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>

cssinput, label {
  line-height: 1.5em;
}

javascript$('input').on('click', function() {
  $('#text').html($('input:checked').val() + ' ditanda!');
});

Lihat juga