首页 > 代码库 > 工作需求----表单多选框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.展示效果图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。