首页 > 代码库 > 工作需求----表单多选框checkbox交互

工作需求----表单多选框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.展示效果图