文档章节

Jquery全选全不选操作的最简单代码

超龍
 超龍
发布于 2017/09/03 09:37
字数 311
阅读 8
收藏 0

需求:

1.点击“全选/全不选”,当此选择框是未选择状态则选中,下面的选择框也全选中;

2.点击“全选/全不选”,当此选择框是选择状态则取消选中,下面的选择框也全取消选中;

3.当下面的选择框全部选中后,“全选/全不选”选择框选中;

4.当下面的选择框有一个取消选中后,“全选/全不选”选择框取消选中;

HTML代码如下:

<input type=”checkbox” name=”id”  class=”subcheck”  value=”1″ />1<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”2″ />2<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”3″ />3<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”4″ />4<br />
<input type=”checkbox”  name=”id”   id=”allCheckbox”  value=””/>全选/取消全选

Js代码如下:

$(‘#allCheckbox’).unbind().bind(‘click’, function() {
$(‘.subcheck:not(:disabled)’).prop(‘checked’, $(this).is(‘:checked’));
});
//当没有选中某个子复选框时,allCheckbox取消选中
$(‘.subcheck:not(:disabled)’).unbind().bind(‘click’, function() {
console.log($(‘.subcheck’).size() == $(‘.subcheck:checked’).size());
$(‘#allCheckbox’).prop(‘checked’, $(‘.subcheck’).size() == $(‘.subcheck:checked’).size());
});

以上代码需要注意的是:用prop,不要用attr,否则只会执行一次。

获取选择的id值:

//获取选择的id
var valArr = new Array;
$(‘input[type=checkbox].subcheck:checked’).each(function(i) {
valArr[i] = $(this).val();
})
var vals = valArr.join(‘,’);
console.log(vals);

 

© 著作权归作者所有

共有 人打赏支持
超龍
粉丝 1
博文 30
码字总数 8618
作品 0
朝阳
jQuery 1.9版本以上多次点击checkbox无法选中的问题

问题描述:全选功能 代码: $("input[name='onday[]']").each(function(){ }); 第一次 全选和全不选 能很好的工作,但第二次开始 不能全选 将checked改为 true false也不好使 网搜之,说是j...

qingfeng哥
2015/11/06
0
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
奇葩问题——jquery操作checkbox的 checked属性

最近做checkbox,遇到一个奇葩问题,如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-1.9.1.js"></......

seth_y
2014/04/16
0
0
使用jQuery设置元素选中的问题及解决办法

现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的selec...

阿信sxq
2015/06/01
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

71.告警系统主脚本 配置文件 监控项目

20.20 告警系统主脚本(main.sh) 20.21 告警系统配置文件 20.22 告警系统监控项目 20.20 告警系统主脚本(main.sh): ~1.约定:把以后所有的shell脚本放在/usr/local/sbin下,也方便我们查...

王鑫linux
2分钟前
0
0
装饰者模式

装饰者模式 Q:何为装饰模式? ()地给一个对象添加一些额外的(),并且()时,并不影响原对象。扩展功能来说,装饰器模式相比生成子类更为灵活。 Q:使用场景? 1.想要在不影响其他对象的情况下...

阿元
23分钟前
0
0
GO 切片(slice)相关语法

package mainimport("fmt")func main() {var intArr [5]int = [...]int{1,2,3,4,5} //定义一个数组slice := intArr[2:4] //第二个(包含)下标到第四个下标(不包含)fmt.Println...

汤汤圆圆
24分钟前
0
0
活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
38分钟前
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部