Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Community Zone > Forum > ดู javascript เรื่องรับ event ของ checkbox ให้หน่อยครับ



 

ดู javascript เรื่องรับ event ของ checkbox ให้หน่อยครับ

 



Topic : 028665



โพสกระทู้ ( 2 )
บทความ ( 0 )



สถานะออฟไลน์




Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Checkbox Assignments 4</title>

<script language="javascript">
function ToggleBox(form,id)
{
if( (form.elements[1].checked == true) && (form.elements[2].checked == true) && (form.elements[3].checked == true) &&
(form.elements[4].checked == true) )
{
form.elements[0].checked = true;

}
else
form.elements[0].checked = false;


//document.write(tr);
var tr = document.getElementById(id);
//var tr = new array(4);

if(form.elements[1].checked == true )
{
tr.style.backgroundColor="#cccc99";
}
else if(form.elements[2].checked == true )
tr.style.backgroundColor="#cccc99";
else if(form.elements[3].checked == true )
tr.style.backgroundColor="#cccc99";
else if(form.elements[4].checked == true )
tr.style.backgroundColor="#cccc99";
else
tr.style.backgroundColor="#eafbb7";










}

function ToggleAll(form,isChecked,id)
{
var tr = document.getElementById(id);
for(var i=0; i<form.length; i++)
{
//var thead = document.getElementById(id);
if(form.elements[i].type == "checkbox")
{
if(isChecked)
{
form.elements[i].checked = true;
tr.style.backgroundColor="#cccc99";
}
else
{form.elements[i].checked = false;
tr.style.backgroundColor="#eafbb7";
}

}


}
}

function show(form)
{
if( (form.elements[1].checked == false) && (form.elements[2].checked == false) && (form.elements[3].checked == false) &&
(form.elements[4].checked == false) )
var t1 = "คุณไม่ได้เลือกใครเลยครับ";
else
{
t1 = "คนที่ถูกคลิกเลือกคือ\n";
if(form.elements[1].checked == true)
t1 = t1+form.elements[1].value + "\n";

if(form.elements[2].checked == true)
t1 = t1+form.elements[2].value + "\n";

if(form.elements[3].checked == true)
t1 = t1+form.elements[3].value + "\n";

if(form.elements[4].checked == true)
t1 = t1+form.elements[4].value + "\n";


}
alert(t1);

}


</script>

<style type="text/css">
.mouse-over{background-color:#F2ECD3; }
.mouse-out{background-color:#eafbb7; }



</style>
</head>

<body>
<center><h1>Computer Engineering Students Years 4th List</h1></center>
<div style="background-color:#eafbb7">
<hr><br />

<form name="form">
<table width="80%" border="0" cellspacing="2" cellpadding="2" align="center" frame="void" rules="all" bgcolor="#eafbb7">

<thead id="row0">
<td width="8%" align="center"><input type="checkbox" name="allchecked" onClick="ToggleAll(this.form,this.checked,'row0')"></td>
<td width="27%" align="center"><strong>Name</strong></td>
<td width="14%" align="center"><strong>Nickname</strong></td>
<td width="27%" align="center"><strong>E-mail</strong></td>
<td width="24%" align="center"><strong>Phone Number</strong></td>
</thead>

<tr onMouseOver="this.className='mouse-over'" onMouseOut="this.className='mouse-out' " id="row1">
<td align="center"><input type="checkbox" name="checkbox1" value="Traitanit Huangsri" onClick="ToggleBox(this.form,'row1')" o ></td>
<td align="center">Traitanit Huangsri</td>
<td align="center">Not</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">089-7023703</td>
</tr>
<tr onMouseOver="this.className='mouse-over'" onMouseOut="this.className='mouse-out' " id="row2">
<td align="center"><input type="checkbox" name="checkbox2" value="Kiatsopon Waiyapara" onClick="ToggleBox(this.form,'row2')" ></td>
<td align="center">Kiatsopon Waiyapara</td>
<td align="center">Kang</td>
<td align="center"><a href="maitol:[email protected]">[email protected]</a></td>
<td align="center">086-5452499</td>
</tr>
<tr onMouseOver="this.className='mouse-over'" onMouseOut="this.className='mouse-out' " id="row3">
<td align="center"><input type="checkbox" name="checkbox3" value="Pongtarin Srisuwan" onClick="ToggleBox(this.form,'row3')" ></td>
<td align="center">Pongtarin Srisuwan</td>
<td align="center">Gib</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">086-1776977</td>
</tr>
<tr onMouseOver="this.className='mouse-over'" onMouseOut="this.className='mouse-out' " id="row4">
<td align="center"><input type="checkbox" name="checkbox4" value="Patbodin Intajak" onClick="ToggleBox(this.form,'row4')" ></td>
<td align="center">Patbodin Intajak</td>
<td align="center">Pond</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">084-0455356</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<center><input type="button" value="โชว์ข้อมูลที่ถูกคลิกเลือก" onClick="show(this.form)"></center>
</form>
</div>
</body>
</html>


ลองเอาไปรันดูนะครับ ผมมีปัญหาตรงที่ว่า ผมอยากให้เวลาติ๊กเลือกที่ checkbox แล้ว ให้แถวแต่ละแถวมีการทำแถบสี ขึ้นมา แต่ปัญหาก็คือ เวลาติ๊กเลือก checkbox หลายๆ อัน พร้อมๆ กัน มันจะมั่วอ่ะครับ เวลาติ๊กออก มันจะผิดเลย เราจะจัดการเวลามี checkbox หลายๆ อันยังไงดีครับ



Tag : - - - -






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2009-06-27 14:03:32 By : Fanmanutd View : 3081 Reply : 2
 

 

No. 1

Guest


โค้ดยาวและยากเกินใช้ครับพี่น้อง ลองแบบนี้มั้ยครับ ผมแก้ให้แล้ว ใช้ id เข้าถึง Element
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Checkbox Assignments 4</title>


<style type="text/css">
.row:hover{
/* CSS กำหนดสี เมื่อ เมาส์ลอยเหนือแถว */
background-color:#F2ECD3;
}

</style>
</head>

<body>
<center><h1>Computer Engineering Students Years 4th List</h1></center>
<div style="background-color:#eafbb7">
<hr><br />

<form name="form">
<table id="Ttable" width="80%" border="0" cellspacing="2" cellpadding="2" align="center" frame="void" rules="all" bgcolor="#eafbb7">

<thead id="row0">
<td width="8%" align="center"><input type="checkbox" name="allchecked" id="allchecked" onClick="Toggle('all')"></td>
<td width="27%" align="center"><strong>Name</strong></td>
<td width="14%" align="center"><strong>Nickname</strong></td>
<td width="27%" align="center"><strong>E-mail</strong></td>
<td width="24%" align="center"><strong>Phone Number</strong></td>
</thead>
<tbody>
<tr class="row" >
<td align="center"><input name="check1" type="checkbox" id="check[]" value="Traitanit Huangsri" onClick="Toggle('any')" ></td>
<td align="center">Traitanit Huangsri</td>
<td align="center">Not</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">089-7023703</td>
</tr>
<tr class="row">
<td align="center"><input name="check2" type="checkbox" id="check[]" onClick="Toggle('any')" value="Traitanit Huangsri" o ></td>
<td align="center">Kiatsopon Waiyapara</td>
<td align="center">Kang</td>
<td align="center"><a href="maitol:[email protected]">[email protected]</a></td>
<td align="center">086-5452499</td>
</tr>
<tr class="row">
<td align="center"><input name="check3" type="checkbox" id="check[]" onClick="Toggle('any')"value="Traitanit Huangsri" o ></td>
<td align="center">Pongtarin Srisuwan</td>
<td align="center">Gib</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">086-1776977</td>
</tr>
<tr class="row" id="row[]">
<td align="center"><input name="check4" type="checkbox" id="check[]" onClick="Toggle('any')" value="Traitanit Huangsri" o ></td>
<td align="center">Patbodin Intajak</td>
<td align="center">Pond</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">084-0455356</td>
</tr>
</tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<center><input type="button" value="โชว์ข้อมูลที่ถูกคลิกเลือก" onClick="show()"></center>
</form>
</div>
<script language="javascript">
var check =form.elements['check[]']; // ตัวแปรเก็บ checkBox ย่อย
var rows = document.getElementById("Ttable").tBodies[0].rows; // ตัวแปร แถวของตารงที่เก็บ CheckBox ย่อย
var allchecked = document.getElementById("allchecked").checked; //ตัวแปรเก็บ Checked ของ CheckBox หัวตาราง

function Toggle(opt) // คือ all หรือ any คือเลือกทั้งหมด หรือ เลือกเป็นอันๆ
{
if(opt.toString() == "all") //คลิก checkbox หัวตาราง
{
for(var i=0; i<check.length; i++)
{
check[i].checked = allchecked;
if(allchecked) rows[i].style.backgroundColor="#cccc99";
else rows[i].style.backgroundColor="#eafbb7";

}
}
else(opt.toString() == "any") //คลิก checkbox ย่อย
{
var checkAll = true ;
for(var i=0; i<check.length; i++)
{
if(check[i].checked)
{
rows[i].style.backgroundColor="#cccc99";
}
else
{
rows[i].style.backgroundColor="#eafbb7";
checkAll = false ;
}
}
document.getElementById("allchecked").checked = checkAll;
}
}
function show()
{ tr = "";
for(var i=0; i<check.length; i++)
{
if(check[i].checked)
{
tr += rows[i].cells[1].innerHTML +"\n"; // เป็นการเข้าถึง HTML ในเซลล์ นะครับ
}
}
tr += "ถูกเลือก";
alert(tr);
}
</script>


</body>
</html>


Date : 2009-06-28 16:14:59 By : gon
 


 

No. 2

Guest


โทษทีครับ CheckAll ไม่ได้ แก้ใหม่

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Checkbox Assignments 4</title>


<style type="text/css">
.row:hover{
/* CSS กำหนดสี เมื่อ เมาส์ลอยเหนือแถว */
background-color:#F2ECD3;
}

</style>
</head>

<body>
<center><h1>Computer Engineering Students Years 4th List</h1></center>
<div style="background-color:#eafbb7">
<hr><br />

<form name="form">
<table id="Ttable" width="80%" border="0" cellspacing="2" cellpadding="2" align="center" frame="void" rules="all" bgcolor="#eafbb7">

<thead id="row0">
<td width="8%" align="center"><input type="checkbox" name="allchecked" id="allchecked" onClick="Toggle('all')"></td>
<td width="27%" align="center"><strong>Name</strong></td>
<td width="14%" align="center"><strong>Nickname</strong></td>
<td width="27%" align="center"><strong>E-mail</strong></td>
<td width="24%" align="center"><strong>Phone Number</strong></td>
</thead>
<tbody>
<tr class="row" >
<td align="center"><input name="check1" type="checkbox" id="check[]" value="Traitanit Huangsri" onClick="Toggle('any')" ></td>
<td align="center">Traitanit Huangsri</td>
<td align="center">Not</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">089-7023703</td>
</tr>
<tr class="row">
<td align="center"><input name="check2" type="checkbox" id="check[]" onClick="Toggle('any')" value="Traitanit Huangsri" o ></td>
<td align="center">Kiatsopon Waiyapara</td>
<td align="center">Kang</td>
<td align="center"><a href="maitol:[email protected]">[email protected]</a></td>
<td align="center">086-5452499</td>
</tr>
<tr class="row">
<td align="center"><input name="check3" type="checkbox" id="check[]" onClick="Toggle('any')"value="Traitanit Huangsri" o ></td>
<td align="center">Pongtarin Srisuwan</td>
<td align="center">Gib</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">086-1776977</td>
</tr>
<tr class="row" id="row[]">
<td align="center"><input name="check4" type="checkbox" id="check[]" onClick="Toggle('any')" value="Traitanit Huangsri" o ></td>
<td align="center">Patbodin Intajak</td>
<td align="center">Pond</td>
<td align="center"><a href="mailto:[email protected]">[email protected]</a></td>
<td align="center">084-0455356</td>
</tr>
</tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
<center><input type="button" value="โชว์ข้อมูลที่ถูกคลิกเลือก" onClick="show()"></center>
</form>
</div>
<script language="javascript">
var check =form.elements['check[]']; // ตัวแปรเก็บ checkBox ย่อย
var rows = document.getElementById("Ttable").tBodies[0].rows; // ตัวแปร แถวของตารงที่เก็บ CheckBox ย่อย
function Toggle(opt) // คือ all หรือ any คือเลือกทั้งหมด หรือ เลือกเป็นอันๆ
{
var allchecked = document.getElementById("allchecked").checked; //ตัวแปรเก็บ Checked ของ CheckBox หัวตาราง
if(opt.toString() == "all") //คลิก checkbox หัวตาราง
{
for(var i=0; i<check.length; i++)
{
check[i].checked = allchecked;
if(allchecked) rows[i].style.backgroundColor="#cccc99";
else rows[i].style.backgroundColor="#eafbb7";

}
}
else(opt.toString() == "any") //คลิก checkbox ย่อย
{
var checkAll = true ;
for(var i=0; i<check.length; i++)
{
if(check[i].checked)
{
rows[i].style.backgroundColor="#cccc99";
}
else
{
rows[i].style.backgroundColor="#eafbb7";
checkAll = false ;
}
document.getElementById("allchecked").checked = checkAll;
}

}
}
function show()
{ tr = "";
for(var i=0; i<check.length; i++)
{
if(check[i].checked)
{
tr += rows[i].cells[1].innerHTML +"\n"; // เป็นการเข้าถึง HTML ในเซลล์ นะครับ
}
}
tr += "ถูกเลือก";
alert(tr);
}
</script>


</body>
</html>
Date : 2009-06-28 16:23:15 By : gon
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ดู javascript เรื่องรับ event ของ checkbox ให้หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่