jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop()
prop() 方法设置或返回被选元素的属性和值。
$("#selectAll").click(function(){
$("input[name='selectfile']").prop("checked",$(this).prop("checked"));
});
<table style="text-align: center">
<tbody>
<tr>
<td><input type="checkbox" id="selectAll" ><span>全部</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
<tr>
<td><input type="checkbox" name="selectfile"><span>AVI</span></td>
</tr>
</tbody>
</table> 2.给需要点击选中的DOM元素设置统一name作为标识 通过改变class的值来实现选中/取消选中的页面效果 ,可以一组里面只有一个选中,或者一组里面可以多个选中
var sel_class=" select_me" //注意 空格
$('[name="select_li"]').click(function(){
//用toggleClass()方法切换选中样式
$(this).toggleClass(sel_class)
//点击事件触发时先把同一组的所有样式设置为gmyzj_name4 相当于全部取消选中,再给当前点击的DOM元素添加选中的样式
// $('[name="select_li"]').attr('class', "gmyzj_name4");
// $(this).attr('class', "gmyzj_name4" + sel_class);
})
<ul style="list-style:none ">
<li class="gmyzj_name4" name="select_li">111111111111</li>
<li class="gmyzj_name4" name="select_li">222222222</li>
<li class="gmyzj_name4" name="select_li">33333333</li>
<li class="gmyzj_name4" name="select_li">4444444444</li>
</ul>
jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换的更多相关文章
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
- element-ui 里面el-checkbox多选框,实现全选单选
data里面定义了 data:[], actionids:[],//选择的那个actionid num1:0,//没选择的计数 num2:0,//选中的计数 ...
- layui 复选框checkbox 实现全选全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- zTree 节点勾选取消勾选 选中取消选中
zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...
- jquery 单击选中 再次选中取消选中
html: <div id="full" class='weui-popup__container' style="background: #fff"&g ...
- jQuery移除或禁用html元素点击事件常用方法小结
移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法 ...
随机推荐
- python学习准备阶段(环境配置)python解释器的选择
pycharm提示No Python interpreter configgured for the project ####### 1 点击configure python interpreter ...
- 算法笔记_054:Prim算法(Java)
目录 1 问题描述 2 解决方案 2.1 贪心法 1 问题描述 何为Prim算法? 此处引用网友博客中一段介绍(PS:个人感觉网友的这篇博客对于Prim算法讲解的很清楚,本文与之相区别的地方在于具 ...
- Hibernate 第一个体验程序
首先要导入包,将下载的hibernate所有required包导入,将下载的hibernate用来写log的slf4j的api和nopjar包导入,将下载的mysql链接引擎jar包导入. 然后新建j ...
- Apache Spark(转)
来自:维基百科,自由的百科全书 Apache Spark是一个开源簇运算框架,最初是由加州大学柏克莱分校AMPLab所开发.相对于Hadoop的MapReduce会在运行完工作后将中介数据存放到磁盘中 ...
- UIActivityViewController实现系统原生分享
代码地址如下:http://www.demodashi.com/demo/11042.html 一.效果预览 二.接下来介绍UIActivityViewController,跟我动手做 1.创建要分享 ...
- iTunes 无法添加 iPhone 自定义铃声
本篇文章由:http://xinpure.com/itunes-unable-to-add-iphone-custom-ringtones/ 新版本 iTunes 需要在 菜单栏 -> 文件 中 ...
- 【软件project】——软工视频总结
软件project是一门研究用project化方法构建和维护有效的.有用的和高质量的软件的学科.它涉及程序设计语言.数据库.软件开发工具.系统平台.标准.设计模式等方面. 软工,基本的六阶段:制定计划 ...
- 盘点SEO和SEM的优劣势
如果你不知如何分配你的搜索营销预算,或是和客户提案的时候不知道怎么样去解释搜索营销产品(SEO和SEM)的区别,又或者不了解网站/企业在当前阶段应该优先施行哪种搜索营销策略,本文可以帮助你深入了解SE ...
- LNMP架构二
Nginx默认虚拟主机 1.首先修改nginx.conf文件,删除server及下面的,在http最后添加include vhost/*.conf; (指定虚拟主机目录,并读取以.conf结尾的文件) ...
- 可能是最通俗易懂的 Java 位操作运算讲解
https://blog.csdn.net/briblue/article/details/70296326