工作需求----表单多选框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 ...
随机推荐
- html5 drag
这里是学习html5的拖放功能.这个API主流浏览器基本支持.ie浏览器是有限支持,dataTransfer.setData/getData. 在html5里面,任何元素都是可以拖放的. 需要拖放的元 ...
- hdu 5901 Count primes
题意: 计数区间$[1, n](1 \leq n \leq 10^{11})$素数个数. 分析: 这里只介绍一种动态规划的做法. 首先要说一下[分层思想]在动态规划中非常重要,下面的做法也正是基于这一 ...
- Cenots7编译Opencv3.1错误:下载ippicv,解决方案
在centos7上安装Opencv的时候,停在了下载ippicv的地方,一直都下载不下来. ippicv是一个并行计算库,其实可以不用的. 如果不想用这个并行计算库,在做Cmake的时候用参数关闭即可 ...
- android学习计划2
1.linux下Kconfig编写规范 2.linux下Makefile编写规范 3.android下Makefile编写规范 4.android.mk编写规范 5.android系统裁剪
- Fragment全解析系列(三):Fragment之我的解决方案:Fragmentation
源码地址:Github,欢迎Star,Fork. Demo网盘下载(V_0.7.13)Demo演示:单Activity + 多Fragment,项目中有3个Demo. 流式的单Activity+多Fr ...
- WebForm session,cookies
session : Session:在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web页之 ...
- 关于Markdown
之前有接触过一点markdown,知道能生成好看的排版,只是太懒都不去看不去记那些标签 现在才发现它简单好用得有点伟大 一个在线的Markdown编辑器:https://stackedit.io/ed ...
- 04 KVC|KVO|Delegate|NSNotification区别
一. iOS 中KVC.KVO.NSNotification.delegate 在实际的编程中运用的非常多,掌握好他们的运行原理和使用场合对于我们程序的开发将会带来事办工倍的效果: 二. KVC ...
- 办公大楼3D指纹门禁系统解决方案
随着人们对工作.生活的自动化水平也提出了越来越高的要求.以大楼安保对出入大楼的外来人员进行登记放行或以铁锁.钥匙和卡为代表的出入管理方式已无法满足需求. 利用科技的手段,实现办公大楼的安全现代化.管理 ...
- Gradle版本变更的问题
了解相关三个概念 gradle .gradle wrapper . gradle plugin (1)Gradle : 项目的构建工具,管理一个项目的依赖架包.性质和maven相似. (2)Gra ...