Tuesday, December 9, 2014

การอ่านค่าจาก Checkbox ด้วย jQuery

ลองมาอ่านค่าจาก checkbox กันสองอย่างคือ

1. มี checkbox กี่อันถูกเลือก
2. ค่าใน checkbox ที่ถูกเลือกทั้งหมดเป็นเท่าใด

แบบนี้ครับ
โค้ด
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="jquery-2.1.1.min.js"></script>
  <script>
   $(document).ready(function(){  
    $("button").on("click",function(){
     //number of checked checkbox
     var num = $("input[type=checkbox]:checked").length;
     var value = "";
     //loop for each checked checkbox
     $("input[type=checkbox]:checked").each(function() {
      value = value + $(this).val() + " ";
     });
     alert("Number of selected checkbox = "+num+"\n"+"Value = "+value);
    });
   });  
  </script>
 </head>

<body>
 <input type="checkbox" name="fruit" value="Apple">Apple<br/>
 <input type="checkbox" name="fruit" value="Papaya">Papaya<br/>
 <input type="checkbox" name="fruit" value="Banana">Banana<br/>
 <button>OK</button>
</body>
</html>

อ้างอิง
http://api.jquery.com/checked-selector/
http://stackoverflow.com/questions/14679916/jquery-get-multiple-checked-values-from-checkbox

No comments:

Post a Comment