ซีเลกเตอร์ checked
ซีเลกเตอร์ :checked เลือกองค์ประกอบ
ที่ถูกเลือก นั่นคือองค์ประกอบที่มีแอตทริบิวต์
checked หรือ
selected
ซีเลกเตอร์ :checked ทำงานกับช่องทำเครื่องหมาย
(checkbox) และ
ปุ่มตัวเลือกวงกลม
(radio)
รวมถึงองค์ประกอบที่มีแท็ก
option
เพื่อให้ได้เฉพาะตัวเลือกที่ถูกเลือกขององค์ประกอบ
select
ให้ใช้ซีเลกเตอร์
selected
ไวยากรณ์
นี่คือวิธีเลือกองค์ประกอบที่มี
แอตทริบิวต์ checked:
$(':checked');
ตัวอย่าง
มาแสดงจำนวนช่องทำเครื่องหมายที่ถูกเลือกทุกครั้งที่เลือกช่องทำเครื่องหมาย อย่างที่คุณเห็น ก่อนคลิกครั้งแรก จะแสดงช่องทำเครื่องหมาย ที่ถูกเลือกตามค่าเริ่มต้น นั่นคือช่องที่สองและช่องที่สี่:
<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);
ตัวอย่าง
มาแสดงค่าของปุ่มตัวเลือกวงกลมแต่ละปุ่มที่ถูกเลือกด้านล่างเมื่อคลิก:
<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!');
});
