基于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>

 

posted @ 2013-08-01 23:02  jshaibozhong  阅读(442)  评论(0编辑  收藏  举报