Live Demo

ลองดูจากภาพ หรือ ลองเล่น Live Demo ดูท่านน่าจะเข้าใจสิ่งที่ผมกำลังจะอธิบาย คือเมื่อท่านคลิกที่ปุ่ม Check All ก็ใช้ติ๊กเครื่องหมายถูก ในช่อง checkbox ทั้งหมด การจะทำอย่างนี้ถ้าเขียนด้วย javascript แบบเดิมๆ อาจจะต้องใช้หลายบรรทัดทีเดียว แต่ถ้าเปลี่ยนมาใช้ jQuery แล้วละก้อ มองเห็นสวรรค์รำไร ทีเดียว มันสั้นเหลือแสน และง่ายเหลือหลาย

โค้ด

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Play with Checkbox</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
	$("#checkall").click(function(){
 
		$(":checkbox").attr("checked","checked");
 
	});
 
})
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p><input type="button" name="checkall" id="checkall" value="Check All" /></p>
  <p><input type="checkbox" name="checkbox" id="checkbox" /> เช็ก 1 </p>
  <p><input type="checkbox" name="checkbox2" id="checkbox2" /> เช็ก 2</p>
  <p><input type="checkbox" name="checkbox3" id="checkbox3" /> เช็ก 3</p>
  <p><input type="checkbox" name="checkbox4" id="checkbox4" /> เช็ก 4</p>
</form>
</body>
</html>

เมื่อปุ่ม checkall ถูกคลิก

$("#checkall").click(function(){

ให้ติ๊กเครื่องหมายถูก คอนโทรลที่เป็น checkbox ทุกตัว

$(":checkbox").attr("checked","checked");
jQuery
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ