Jquery Tip วิธีหาว่าผู้ใช้เลือก radio หรือ checkbox ไหนบ้าง


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" />&nbsp;1</p>
<p><input type="radio" name="my_radio" value="2" />&nbsp;2</p>
<p><input type="radio" name="my_radio" value="3" />&nbsp;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" />&nbsp;A</p>
<p><input type="checkbox" name="my_checkbox" value="B" />&nbsp;B</p>
<p><input type="checkbox" name="my_checkbox" value="C" />&nbsp;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>