工作需求----表单多选框checkbox交互

关于多选框，反选及选取几个：

 

1.html内容

<!--begin checkbox-->
      <div class="c_n_manage_tablexx">
            <input type="checkbox" class="c_n_manage_checkbox c_n_manage_check" />
            全选（已选择<span class="a_n_manage_num">0</span>个）
            <input type="button" disabled="disabled" class="c_n_manage_downbox c_n_manage_dis " id="c_n_manage_downmodel"value="批量下架" />
            <input type="button" disabled="disabled" class="c_n_manage_addgroup c_n_manage_dis" value="添加到分组" />
      </div>
 <!--end checkbox-->

<div class="c_n_manage_tablecon">
       <table>
　　　　　　　<tr _id="1">
         　　　　 <td><input type="checkbox" class="c_n_manage_checkbox"/></td>
　　　　　　　</tr>
　　　　</table>
</div>

 

2.JQ代码交互

//多选框设置
  $doc.on('click' , '.c_n_manage_check' , function(){ //全选反选
     var checkeds = $(".c_n_manage_tablecon").find(":checkbox");
     if($(this).attr("checked")){
        checkeds.attr("checked",true); 
        $(".c_n_manage_dis").removeAttr("disabled");
        $(".c_n_manage_dis").css("cursor","pointer");
     }
     else{
        checkeds.attr("checked",false);
        $(".c_n_manage_dis").attr("disabled", true);
        $(".c_n_manage_dis").css("cursor","");
     }
  }).on('click' , '.c_n_manage_tablecon input' , function(){ //按钮状态
     if($(this).attr("checked")){
        $(".c_n_manage_dis").removeAttr("disabled");
        $(".c_n_manage_dis").css("cursor","pointer");
     }
     else{
        $(".c_n_manage_dis").attr("disabled", true);
        $(".c_n_manage_dis").css("cursor","");
     }
  }).on('click' , ':checkbox' , function(){ //选中几个状态
     $(".a_n_manage_num").html($(".c_n_manage_tablecon").find(":checkbox:checked").length);
  });
   

 

3.展示效果图