JQuery คือ javascript library ที่ได้รับความนิยมอย่างมากสำหรับ การพัฒนา WebApplication ซึ่งส่วนใหญ่เรามักใช้ อ่านค่าใน Textbox ,Select Element หรือ Textarea โดยใช้คำสั่ง $("......").val() ในที่นี้ เราจะลองใช้ JQuery เพื่ออ่านค่า Radio และ Checkbox ที่ผู้ใช้เลือกดู
วิธีดูว่า ผู้ใช้เลือก Radio ไหนบ้าง โดยใช้ Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- สร้าง Radio โดยให้ชื่อว่า my_radio -->
<p><input type="radio" name="my_radio" value="1" /> 1</p>
<p><input type="radio" name="my_radio" value="2" /> 2</p>
<p><input type="radio" name="my_radio" value="3" /> 3</p>
<!-- สร้าง ปุ่ม OK โดยกำหนดว่า เมื่อ คลิกแล้วจะทำงานที่ function check() -->
<p><button onclick="check()" >OK</button></p>
<script>
function check()
{ //แสดง alert ค่า Radio ที่ผู้ใช้เลือก
alert($("[name=my_radio]:checked").attr("value"));
//หรืออาจใช้คำสั่ง document.querySelector('input[name="my_radio"]:checked').value;
}
</script>
</body>
</html>
วิธีดูว่า ผู้ใช้เลือก Checkbox ไหนบ้าง โดยใช้ Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- สร้าง Checkbox โดยให้ชื่อว่า my_checkbox -->
<p><input type="checkbox" name="my_checkbox" value="A" /> A</p>
<p><input type="checkbox" name="my_checkbox" value="B" /> B</p>
<p><input type="checkbox" name="my_checkbox" value="C" /> C</p>
<!-- สร้างปุ่ม OK โดยเมื่อคลิกแล้วจะไปทำงานที่ function check() -->
<p><button onclick="check()" >OK</button></p>
<script>
function check()
{
//alert แสดงจำนวน checkbox ที่ผู้ใช้เลือก
alert($("[name=my_checkbox]:checked").length);
//alert แสดงค่าของ checkbox อันแรก ที่ผู้ใช้เลือก
alert($("[name=my_checkbox]:checked").val());
}
</script>
</body>
</html>