工作需求----表单多选框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.展示效果图
aaarticlea/png;base64,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" alt="" />
工作需求----表单多选框checkbox交互的更多相关文章
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- AngularJS(六):表单-复选框
本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...
- SpringMVC 表单复选框处理
<form action="" method="post"> <c:forEach items="${dblist}" v ...
- 工作需求----表单select多选交互
由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...
- Form表单之复选框checkbox操作
input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
随机推荐
- mySQL函数根据经纬度计算两点距离
DROP FUNCTION IF EXISTS func_calcDistance ; CREATE FUNCTION func_calcDistance( origLng ,), -- 目的地经度 ...
- c#实现邮件发送链接激活
2016-08-24 10:09:52 public void MailSend(string email) { MailMessage MyMail = new MailMessage(); MyM ...
- nil、Nil、NULL、NSNull的区别
nil:指向一个对象的空指针,对objective c id 对象赋空值. Nil:指向一个类的空指针,表示对类进行赋空值. NULL:指向其他类型(如:基本类型.C类型)的空指针, 用于对非对象指针 ...
- 2.[WP Developer体验Andriod开发]Andriod Studio结合Visual Studio Emulator for Android调试Android App
0. 工欲善其事必先利其器 上一篇博客对比了一下Android和WinPhnoe的布局容器,后续篇章重点放在Android的开发上了. 说到开发就绕不开调试程序,调试Android App我们有2种选 ...
- dmidecode查看设备硬件信息
在bash里输入:dmidecode -s system-product-name 或者lshw -class system 在Linux系统环境下(CentOS .4和Ubuntu .04已确认), ...
- xfs磁盘(文件)碎片查看和整理
网上有些帖子说XFS不用做碎片整理,其实是错误的.XFS用延迟写入等技术确实可以减少碎片的出现,但是如果服务器用了几年,并且文件操作比较频繁,还是会出现碎片的,应该整理.注意:在Debian中XFS相 ...
- mac上eclipse用gdb调试(转)
mac上eclipse用gdb调试 With its new OS release, Apple has discontinued the use of GDB in OS X. Since 2005 ...
- C 语言
1, // char server[] = BaseNetServerIp; // string serverStr = _aliNetServerEnabled?Ne ...
- Json解析实例
using System; using System.Collections.Generic; using System.Runtime.Serialization; using System.Win ...
- 超炫数字特效动画AE模板
下载方式: 网盘地址+迅雷地址+迅雷地址+备份地址 <ignore_js_op> 本AE模板是由Videohive机构出品的超炫数字特效动画AE模板,Videohive The Numbe ...