input checkbox复选框全选与部分选中效果
 input checkbox复选框全选与不全选方法封装如下:
 html代码:
 <table class="yt-table check-test-tab" style="width:840px;margin: 20px auto;">
	  <thead class="yt-thead">
		    <tr>
			      <th>
				        <lable class="check-label yt-checkbox parent-check">
					          <input type="checkbox" class="check-all" name="test" />
				        </lable>
			      </th>
			      <th>预算编号</th>
			      <th>预算表名称</th>
		    </tr>
	  </thead>
	  <tbody class="yt-tbody">
		    <tr>
			      <td>
				        <lable class="check-label yt-checkbox">
					          <input type="checkbox" name="test" />
				        </lable>
			      </td>
			      <td>T27</td>
			      <td>预算总表</td>
		    </tr>
		    <tr>
			      <td>
				        <lable class="check-label yt-checkbox">
					          <input type="checkbox" name="test" />
				        </lable>
			      </td>
			      <td>T28</td>
			      <td>人员支出</td>
		    </tr>
		    <tr>
			      <td>
				        <lable class="check-label yt-checkbox">
					          <input type="checkbox" name="test" />
				        </lable>
			      </td>
			      <td>T29</td>
			      <td>住房改革支出1</td>
		    </tr>
		    <tr>
			      <td>
				        <lable class="check-label yt-checkbox">
					          <input type="checkbox" name="test" />
				        </lable>
			      </td>
			      <td>T30</td>
			      <td>住房改革支出2</td>
		    </tr>
		    <tr>
			      <td>
				        <lable class="check-label yt-checkbox">
					          <input type="checkbox" name="test" />
				        </lable>
			      </td>
			      <td>T31</td>
			      <td>公用支出</td>
		    </tr>
	  </tbody>
</table>
js代码:
<script type="text/javascript">
(function($){
	  $.fn.extend({
		    /**
		     * 设置多选
		     * @param {Object} obj string类型参数
		     */
	        setCheckBoxState:function(obj){
	    	      /**
	    	       * 判断状态 check(选中),
	    	       * uncheck(取消选中),
	    	       * disabled(禁用),
	    	       * undisabled(取消禁用),
	    	       * half(半选)
	    	       */
	    	      if(obj == "check"){
	    		        $(this).parent().addClass("check");	
	    		        $(this)[0].checked = true;
	    	      }else{
	    		        $(this).parent().removeClass("check");
	    	      }
	    	      /**
	    	       * 取消选中
	    	       */
	    	      if(obj == "uncheck"){
	    		        $(this).parent().removeClass("check");
	    		        $(this)[0].checked = false;
	    		        //清楚禁用样式
	    		        $(this).parent().removeClass("yt-check-disabled");	
	    	      }
	    	      /**
	    	       * 禁用
	    	       */
	    	      if(obj == "disabled"){
	    		        $(this)[0].disabled=true; 
	    		        $(this)[0].checked = false;
	    		        $(this).parent().addClass("yt-check-disabled");	
	    	      }
	    	      /**
	    	       * 取消禁用
	    	       */
	    	      if(obj == "undisabled"){
	    		        $(this)[0].disabled=false; 
	    		        $(this).parent().removeClass("yt-check-disabled");	
	    	      }
	    	      /**
	    	       * 半选
	    	       */
	    	      if(obj == "half"){
	    		        $(this).parent().addClass("yt-checkbox-half");
	    	      }else{
	    		        $(this).parent().removeClass("yt-checkbox-half");
	    	      }
	    	      /**
			       *全选
			       */
			      if(obj == "checkAll"){
				        //设置当前对象下面的复选框选中
				        $(this).find(".yt-checkbox").addClass("check");
				        $(this).find('input[type="checkbox"]').prop("checked",true);
			      }
			      /**
			       *反选
			       */
			      if(obj == "unCheckAll"){
				        //设置当前对象下面的复选框选中
				        $(this).find(".yt-checkbox").removeClass("check");
				        $(this).find('input[type="checkbox"]').prop("checked",false);
			      }
	       },
	  })
})(jQuery)
</script>
<script type="text/javascript">
  var checkBox = {
		    init:function(){
			      checkBox.events();
		    },
		    events:function(){
			      //全选
			      $(".parent-check").change(function(){
				      //判断自己是否被选中  
				      if($(this).hasClass("check")){
					         //设置反选
					         $("table tbody").setCheckBoxState("unCheckAll");  
				      }else{
					        //调用设置选中方法,全选 
					        $("table tbody").setCheckBoxState("checkAll"); 
				      }
			    });
			    //表格中复选框操作 
    		    $("table tbody .yt-checkbox").change(function(){  
    			       //获取区域复选框数量,用来比较  
				      var  tableCheckLen = $("table tbody .yt-checkbox").length;  
       			      if($(this).hasClass("check")){ 
            		        //取消全选  
            		        $("input.check-all").prop("checked",false).setCheckBoxState("uncheck");  
        		      }else{  
            		        //设置当前复选框选中  
           			         $(this).find("input").setCheckBoxState("check");  
            		        //比对选中的复选框数量和区域内复选框数量  
            		        if($("table tbody .yt-checkbox.check").length == tableCheckLen){  
                		          //设置反选  
                		          $("input.check-all").prop("checked",true).setCheckBoxState("check");  
            		        }  
        		      }  
    		    });  
		  }
	}
	$(function(){
		  checkBox.init();
	})
</script>
效果如图:


                    
                
                
            
        
浙公网安备 33010602011771号