基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd').addClass('tr_odd'); //奇数行 $('table tr:even').addClass('tr_even'); //偶数行 //单击行选中是事件 $("tr").bind("click",function(){ if( $(this).hasClass('selected') ){ $(this).removeClass('selected') .find(":checkbox").attr("checked",false); }else{ $(this).addClass('selected') .find(":checkbox").attr("checked",true); } }) //全选事件 $("#selectAll").click(function(){ $(":checkbox").attr("checked","checked"); }); //反选事件 $("#unSelect").click(function(){ var checkbox=$(":checkbox"); for(var i=0;i<checkbox.length;i++){ checkbox[i].checked=!checkbox[i].checked; } }); //取消事件 $("#cancelSelect").click(function(){ $(":checkbox").removeAttr("checked"); }); });
<body> <input type="button" value="全选" id="selectAll"> <input type="button" value="反选" id="unSelect"> <input type="button" value="取消" id="cancelSelect"> <table width="200" border="1"> <tr> <td>cxv</td> <td>zxcv</td> <td>zxcv</td> </tr> <tr> <td><form id="form1" name="form1" method="post" action=""> <label> <input type="checkbox" name="checkbox" value="checkbox" /> </label> </form> </td> <td>zxcv</td> <td>gfh</td> </tr> <tr> <td><form id="form2" name="form2" method="post" action=""> <label> <input type="checkbox" name="checkbox2" value="checkbox" /> </label> </form> </td> <td>fhg</td> <td>ghj</td> </tr> <tr> <td><form id="form3" name="form3" method="post" action=""> <label> <input type="checkbox" name="checkbox3" value="checkbox" /> </label> </form> </td> <td>dfg</td> <td>fgh</td> </tr> </table> </body> </html>
<script language="JavaScript" type="text/javascript"> function Checkbox1() { var o=new Array() var j=0 var obj=document.form1.getElementsByTagName("INPUT") for (var i=0;i<=obj.length-1;i++){ if (obj[i].checked){o[j]=obj[i].value;j++} } alert(o); } </script> <form name="form1"> <input name="ID" type="checkbox" value="1"> <input name="ID" type="checkbox" value="2"> <input name="ID" type="checkbox" value="3"> <input type="button" onclick="Checkbox1();" value="提交"> </form>
<script> function Checkbox1(form){ var checks = form.ID; for(i=0; i<checks.length; i++){ var obj = checks[i]; if(obj.checked == true){ alert(obj.value); } } } </script> <form name="form1"> <input name="ID" type="checkbox" value="1"> <input name="ID" type="checkbox" value="2"> <input name="ID" type="checkbox" value="3"> <input type="button" onclick="Checkbox1(this.form)" value="提交"> </form>