标签:style blog color os strong io
关于多选框,反选及选取几个:
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.展示效果图
工作需求----表单多选框checkbox交互,布布扣,bubuko.com
标签:style blog color os strong io
原文地址:http://www.cnblogs.com/ninali/p/3860944.html