Live Demo

ครั้งก่อน ผมได้เขียน วิธีการสร้างปุ่ม เลือกทั้งหมด ไปแล้วครั้งหนึ่ง มาวันนี้ผมจะแสดงวิธีสร้างปุ่ม แบบเลือกตรงข้าม ถ้าท่านไม่เข้าใจว่า เลือกตรงข้ามเป็นยังไง ลอง Live Demo ดูครับ

โค้ด 

<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(){
 
	$("#checkinverse").click(function(){
 
		var ctl_unchecked = $(":checkbox:not(:checked)");
		var ctl_checked = $(":checkbox:checked");
 
		ctl_unchecked.attr( "checked","checked" );
		ctl_checked.removeAttr( "checked" );
 
	});
 
})
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p><input type="button" name="checkinverse" id="checkinverse" value="Check Inverse" />
  </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>

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

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

เก็บเอา checkbox ที่ไม่ถูกเลือกทุกตัว ไว้ในตัวแปร ก่อน

var ctl_unchecked = $(":checkbox:not(:checked)");

ตัวไหนที่ถูกเลือก ก็เก็บใว้ในตัวแปรซะ สาเหตุที่ต้องทำอย่างนี้ จะได้รู้ว่าตัวไหนบ้างที่ถูกเลือก ตัวไหนบ้างที่ไม่ถูกเลือก

var ctl_checked = $(":checkbox:checked");

ตัวที่ไม่ได้เลือก ให้เลือก

ctl_unchecked.attr( "checked","checked" );

ตัวที่เคยเลือก ก็ให้ยกเลิกการเลือกซะ

ctl_checked.removeAttr( "checked" );

เพียงเท่านี้ เมื่อท่าน ลองเลือกเช็กบ้อกสักสองตัว แล้วลองคลิกที่ปุ่ม checkinverse เช็กบ้อกก็จะถูกเลือกสลับไปสลับมา

jQuery
Avatar

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

Programmer, Blogger

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