มีหลายวิธีในการดำเนินการนี้ ขอแนะนำให้มีคอนเทนเนอร์รอบ ๆ ปุ่มตัวเลือก แต่คุณสามารถใส่ชั้นเรียนลงบนปุ่มได้โดยตรง ด้วย HTML นี้:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
คุณสามารถเลือกตามชั้นเรียน:
$(".shapeButton").click(SetShape);
หรือเลือกตาม ID คอนเทนเนอร์:
$("#shapeList").click(SetShape);
ไม่ว่าในกรณีใดเหตุการณ์จะทริกเกอร์เมื่อคลิกปุ่มตัวเลือกหรือป้ายกำกับแม้ว่าในกรณีหลังจะผิดปกติ (การเลือกโดย "#shapeList") การคลิกที่ป้ายกำกับจะเรียกใช้ฟังก์ชันคลิกสองครั้งด้วยเหตุผลบางประการที่ น้อยที่สุดใน FireFox; การเลือกตามชั้นเรียนจะไม่ทำเช่นนั้น
SetShape เป็นฟังก์ชันและมีลักษณะดังนี้:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
}
ด้วยวิธีนี้คุณสามารถมีป้ายกำกับบนปุ่มของคุณและสามารถมีรายการปุ่มตัวเลือกหลายรายการในหน้าเดียวกันซึ่งทำสิ่งต่างๆได้ คุณยังสามารถให้แต่ละปุ่มในรายการเดียวกันทำสิ่งที่แตกต่างกันได้โดยการตั้งค่าพฤติกรรมที่แตกต่างกันใน SetShape () ตามค่าของปุ่ม