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

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. mysql 5.6 online ddl

    innodb存储引擎实现online ddl的原理是在执行创建或删除操作的同时,将DML操作日志写入到一个缓存中,待完成索引创建后再重做应用到表上,以此达到数据的一致性,这个缓存大小由参数innodb ...

  2. Flesch Reading Ease -POJ3371模拟

    Flesch Reading Ease Time Limit: 1000MS Memory Limit: 65536K Description Flesch Reading Ease, a reada ...

  3. 《利用python进行数据分析》读书笔记--第四章 numpy基础:数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  4. js中文乱码怎么解决【转】

    ①.js 文件中文显示乱码Javascript文件XX.js编辑保存时有一种编码方案(如GBK),当打开文件的时候所用的编码(如UTF-8)和保存时的编码方案不一致时,则会出现中文显示乱码.解决方案: ...

  5. Android多媒体--MediaCodec 中文API文档

    *由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不 ...

  6. C++多线程のpackage_task

    可以异步获取可调用对象的结果.

  7. jQuery学习笔记(四)jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  8. OAuth2.0说明文档

    OAuth2.0说明文档 1.OAuth 2.0 简介 OAuth为应用提供了一种访问受保护资源的方法.在应用访问受保护资源之前,它必须先从资源拥有者处获取授权(访问许可),然后用访问许可交换访问令牌 ...

  9. eclipse上修改js后,浏览器上还是出现原来效果的解决方法

    废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.

  10. JDBC相关的类介绍

    JDBC 背景:1996年,Sun公司推出了Java数据库连接(Java Database Connectivity JDBC)工具包的第一个版本.该工具包使得程序员可以使用结构化语言SQL连接到一个 ...