JavaScript Check and Uncheck All Checkboxes เลือกทั้งหมด ยกเลิกการเลือก

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: JavaScript Check and Uncheck All Checkboxes เลือกทั้งหมด ยกเลิกการเลือก

Re: JavaScript Check and Uncheck All Checkboxes เลือกทั้งหมด ยกเลิกการเลือก

โดย mindphp » 22/12/2010 4:35 pm

ตั้งชื่อ field เป็น array

โค้ด: เลือกทั้งหมด

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Checkbox Fun</title> <script type="text/javascript"><!-- var formblock; var forminputs; function prepare() { formblock= document.getElementById('form_id'); forminputs = formblock.getElementsByTagName('input'); } function select_all(name, value) { for (i = 0; i < forminputs.length; i++) { // regex here to check name attribute var regex = new RegExp(name, "i"); if (regex.test(forminputs[i].getAttribute('name'))) { if (value == '1') { forminputs[i].checked = true; } else { forminputs[i].checked = false; } } } } if (window.addEventListener) { window.addEventListener("load", prepare, false); } else if (window.attachEvent) { window.attachEvent("onload", prepare) } else if (document.getElementById) { window.onload = prepare; } //--></script> </head> <body> <form id="form_id" name="myform" method="get" action="search.php"> <a href="#" onClick="select_all('area', '1');">Check All Fruit</a> | <a href="#" onClick="select_all('area', '0');">Uncheck All Fruit</a><br><br> <input type="checkbox" name="area[]" value="1" />Apples<br /> <input type="checkbox" name="area[]" value="2" />Bananas<br /> <input type="checkbox" name="area[]" value="3" />Chickens<br /> <input type="checkbox" name="area[]" value="4" />Stoats <br><br><a href="#" onClick="select_all('location', '1');">Check All Locations</a> | <a href="#" onClick="select_all('location', '0');">Uncheck All Locations</a><br><br> <input type="checkbox" name="location[]" value="1" />Brighton<br /> <input type="checkbox" name="location[]" value="2" />Hove<br /> </form> </body> </html>

JavaScript Check and Uncheck All Checkboxes เลือกทั้งหมด ยกเลิกการเลือก

โดย mindphp » 22/12/2010 3:41 pm

โค้ด: เลือกทั้งหมด

<SCRIPT LANGUAGE="JavaScript">
<!-- 	
// by Nannette Thacker
// http://www.shiningstar.net
// This script checks and unchecks boxes on a form
// Checks and unchecks unlimited number in the group...
// Pass the Checkbox group name...
// call buttons as so:
// <input type=button name="CheckAll"   value="Check All"
	//onClick="checkAll(document.myform.list)">
// <input type=button name="UnCheckAll" value="Uncheck All"
	//onClick="uncheckAll(document.myform.list)">
// -->

<!-- Begin
function checkAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = false ;
}
//  End -->
</script>
ตัวอย่างการใช้

โค้ด: เลือกทั้งหมด

<form name="myform" action="checkboxes.asp" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>

ข้างบน