ซีเลกเตอร์ checked

ซีเลกเตอร์ :checked เลือกองค์ประกอบ ที่ถูกเลือก นั่นคือองค์ประกอบที่มีแอตทริบิวต์ checked หรือ selected ซีเลกเตอร์ :checked ทำงานกับช่องทำเครื่องหมาย (checkbox) และ ปุ่มตัวเลือกวงกลม (radio) รวมถึงองค์ประกอบที่มีแท็ก option เพื่อให้ได้เฉพาะตัวเลือกที่ถูกเลือกขององค์ประกอบ select ให้ใช้ซีเลกเตอร์ selected

ไวยากรณ์

นี่คือวิธีเลือกองค์ประกอบที่มี แอตทริบิวต์ checked:

javascript$(':checked');

ตัวอย่าง

มาแสดงจำนวนช่องทำเครื่องหมายที่ถูกเลือกทุกครั้งที่เลือกช่องทำเครื่องหมาย อย่างที่คุณเห็น ก่อนคลิกครั้งแรก จะแสดงช่องทำเครื่องหมาย ที่ถูกเลือกตามค่าเริ่มต้น นั่นคือช่องที่สองและช่องที่สี่:

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('Checked: ' + n);
};
countChecked();

$('input[type=checkbox]').on('click', countChecked);

ตัวอย่าง

มาแสดงค่าของปุ่มตัวเลือกวงกลมแต่ละปุ่มที่ถูกเลือกด้านล่างเมื่อคลิก:

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() + ' is checked!');
});

ดูเพิ่มเติม