关于多选框,反选及选取几个:

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.展示效果图

aaarticlea/png;base64,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" alt="" />

工作需求----表单多选框checkbox交互的更多相关文章

  1. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. AngularJS(六):表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  3. SpringMVC 表单复选框处理

    <form action="" method="post"> <c:forEach items="${dblist}" v ...

  4. 工作需求----表单select多选交互

    由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...

  5. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  6. 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  7. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  8. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  9. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

随机推荐

  1. Oracle instr

    instr函数 instr函数在Oracle/PLSQL中是返回要截取的字符串在源字符串中的位置.instr是一个非常好用的字符串处理函数,几乎所有的字符串分隔都用到此函数. 作    用    返回 ...

  2. 2016ACM/ICPC亚洲区沈阳站-重现赛

    C.Recursive sequence 求ans(x),ans(1)=a,ans(2)=b,ans(n)=ans(n-2)*2+ans(n-1)+n^4 如果直接就去解...很难,毕竟不是那种可以直 ...

  3. sql中文日期格式转换(xxxx年x月x日)

    ) set @dd='2014年10月1日' select replace(replace( replace(@dd,'日',''),'月','-'),'年','-') 别人的方法 )='2012年1 ...

  4. dsp28377控制DM9000收发数据——第三版程序,通过外部引脚触发来实现中断接受数据,优化掉帧现象

    //-------------------------------------------------------------------------------------------- - //D ...

  5. 【所见即所得】textarea 精确限制字数、行数,中、英、全半角混检 。源码带注释

    主要解决难点: 1 中文 全角2字符深深的恶意 2 多行输入textarea 手动,自动换行问题 3 获得每行内容 原创,转载请注明出处! <!DOCTYPE html PUBLIC " ...

  6. ximalaya

  7. Android手机_软件01

    1.微信 下载:http://weixin.qq.com/ 2.QQ 下载:http://im.qq.com/download/ 3.滴滴打车(乘客端):http://www.xiaojukeji.c ...

  8. JQuery 添加节点

    Mark一段自己写的添加节点的代码 function reply2(){ $( "<div class=sec1-div5>"+"<div class= ...

  9. MarkDown常用语法记录

    目录 1. 斜体和粗体 2. 分级标题 3. 超链接 3.1 行内式(推荐) 3.2 行外式 3.3 自动链接 4. 锚点 5. 列表 5.1无序列表 5.2有序列表 6. 引用 7. 插入图像 8. ...

  10. mac office 激活

    详见:http://blog.csdn.net/tech4j/article/details/47953311