ออบเจ็กต์ช่องกาเครื่องหมายอินพุต HTML DOM แสดงถึงองค์ประกอบ HTML อินพุตที่มีช่องกาเครื่องหมายประเภท
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
- การสร้าง ด้วยช่องทำเครื่องหมายประเภท
var checkboxObject = document.createElement(“input”); checkboxObject.type = “checkbox”;
คุณสมบัติ
ที่นี่ “checkboxObject ” สามารถมีคุณสมบัติดังต่อไปนี้ −
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| ออโต้โฟกัส | กำหนดว่าช่องทำเครื่องหมายควรเน้นที่การโหลดหน้าแรกหรือไม่ |
| ตรวจสอบแล้ว | กำหนดสถานะของช่องกาเครื่องหมาย เช่น ถูกเลือก/ไม่ถูกเลือก |
| ตรวจสอบค่าเริ่มต้น | ส่งกลับค่าเริ่มต้นของแอตทริบิวต์ที่เลือก เช่น true/false |
| ค่าเริ่มต้น | ตั้งค่า/ส่งคืนค่าเริ่มต้นของช่องทำเครื่องหมาย |
| ปิดการใช้งาน | กำหนดว่าช่องทำเครื่องหมายถูกปิดใช้งาน/เปิดใช้งานหรือไม่ |
| แบบฟอร์ม | ส่งกลับการอ้างอิงของแบบฟอร์มล้อมรอบที่มีช่องทำเครื่องหมาย |
| ไม่ทราบแน่ชัด | ตั้งค่า/ส่งคืนสถานะไม่แน่นอนของช่องทำเครื่องหมาย |
| ชื่อ | กำหนดค่าแอตทริบิวต์ชื่อของช่องทำเครื่องหมาย |
| จำเป็น | กำหนดว่าจำเป็นต้องเลือกช่องทำเครื่องหมายเพื่อส่งแบบฟอร์มหรือไม่ |
| พิมพ์ | ส่งกลับประเภทขององค์ประกอบแบบฟอร์มของช่องทำเครื่องหมาย |
| ค่า | กำหนดค่าแอตทริบิวต์ value ของช่องทำเครื่องหมาย |
ตัวอย่าง
ให้เราดูตัวอย่างของ ค่าช่องทำเครื่องหมายที่ป้อน ทรัพย์สิน −
<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
var valueOfInput = document.getElementById("formCheckbox");
var displayDiv = document.getElementById("displayDiv");
displayDiv.textContent = 'Value: ' + valueOfInput.value;
function changeType(){
if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
valueOfInput.value = 'Red' displayDiv.textContent = 'value: ' + valueOfInput.value;
} else {
displayDiv.textContent = 'Check the checkbox to change value to red';
}
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ก่อนคลิก 'เปลี่ยนค่าของช่องกาเครื่องหมายอินพุต' ปุ่ม −
หลังจากคลิก 'เปลี่ยนค่าของช่องกาเครื่องหมายอินพุต' ปุ่ม −
เลือก 'สีแดง' ช่องทำเครื่องหมาย &คลิก 'เปลี่ยนค่าของช่องทำเครื่องหมายที่ป้อน' ปุ่ม −
