当前位置:编程学习 > JS >>

CHECKBOX全选,取消全选,反选 jquery代码

本文章提供四种关于jquery checkbox全选,取消全选,反选实例代码哦,由于jquery很方便,所以在对复选框方面越来越好了,好了费话不说多了我们来看看这款全选,反选代码。

 

$("#myform").togglecheckboxes()//全选,取消全选,反选
$("#myform").togglecheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选
$("#myform").togglecheckboxes(".top5", true)//全选,取消全选且只选前五个,反选
$("#myform").checkcheckboxes();// 全选
$("#myform").checkcheckboxes(":not(#checkbox1)");//除第一个之外全选
$("#myform").checkcheckboxes(".top5", true);//前五个全选
$("#myform").uncheckcheckboxes(); //取消全选
$("#myform").uncheckcheckboxes(":not(#checkbox1)");//取消全选,排除第一个
$("#myform").uncheckcheckboxes(".top5", true);//取消全选排除前五个

方法二

<script language=网页特效 src="jquery.js"></script>
<script language="javascript">
<!--
    $("document").ready(function(){
    
     $("#all").click(function(){  
    if(this.checked){  
        $("input[name='checkbox']").each(function(){this.checked=true;});
 $("#btn1").attr("value","反选");  
    }else{  
        $("input[name='checkbox']").each(function(){this.checked=false;});  
        $("#btn1").attr("value","全选");
    }  
 }); 

     $("#btn1").click(function(){
        
       $("[name='checkbox']").attr("checked",'true');//全选
     
     })
     $("#btn2").click(function(){
         
         $("[name='checkbox']").removeattr("checked");//取消全选
     
    })
       $("#btn3").click(function(){
         
        $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
     
      })
       $("#btn4").click(function(){
         
         $("[name='checkbox']").each(function(){
            
           
             if($(this).attr("checked"))
            {
              $(this).removeattr("checked");
             
            }
           else
           {
             $(this).attr("checked",'true');
              
          }
         
         })
      
       })
        $("#btn5").click(function(){
      var str="";
          $("[name='checkbox'][checked]").each(function(){
             str+=$(this).val()+"rn";
         })
       alert(str);
    })
      })
 //-->
 </script>
<body>
<form name="form1" method="post" action="">
  <input type="checkbox" id="all" name="all">
  <input type="button" id="btn1" value="全选">
  <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
  <input type="button" id="btn4" value="反选">
  <input type="button" id="btn5" value="获得选中的所有值">
   <br>
  <input type="checkbox" name="checkbox" value="checkbox1">
  checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2">
 checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3">
  checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
  <input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
  <input type="checkbox" name="checkbox" value="checkbox7">
  checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8">
 checkbox8
 </form>

方法二

<input type="button" class="btn_selectallbg" id="checkall2" value="全选" />

<input type="checkbox"  name="groupid[]"  value="遍历的某列值 " />

 

// 给全选按钮添加全选功能
    $('#checkall2').toggle(function(){
            $("input[name='groupid[]']").each(function(){
                $(this).attr('checked',true);
            });
            $(this).attr('value','取消');
        },function(){
            $("input[name='groupid[]']").each(function(){
                $(this).attr('checked',false);
            });
            $(this).attr('value','全选');
        }
);


方法三

<script type="text/javascript">
 <!--
$(document).ready(function(){

$("#abutton").click(function(){ $("input[@type=checkbox]").check(); });
$("#ubutton").click(function(){ $("input[@type=checkbox]").uncheck(); });

});

jquery.fn.extend({
check: function() { return this.each(function() { this.checked = true; }); },
uncheck: function() { return this.each(function() { this.checked = false; });
 }
});
//-->
</script>

<button id="abutton">全选</button>
<button id="ubutton">反选</button>

<input type="checkbox" value="" />a
<input type="checkbox" value="" />b
<input type="checkbox" value="" />c
<input type="checkbox" value="" />d
<input type="checkbox" value="" />e

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,