文档章节

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

超龍
 超龍
发布于 2017/09/03 09:37
字数 311
阅读 9
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Nginx 内置请求参数

nginx内置变量 内置变量存放在 ngx_http_core_module 模块中,变量的命名方式和apache 服务器变量是一致的。总而言之,这些变量代表着客户端请求头的内容,例如$http_user_agent, $http_coo...

大木老师故事的小黄花
昨天
2
0
我为什么坚持写作

说写作可能是抬高了自己,目前来说只能是写东西、记录东西、表达观点和情感。 在俞敏洪的公众号上看到过一篇文章,里面讲了一个观点,大概是说写作不求能写出伟大的作品,只是把自己的生活、...

Bob2100
昨天
4
0
中国公有云三巨头,同时支持Rancher Kubernetes平台

华为云容器引擎(CCE)、阿里云K8S容器服务(ACK)和腾讯云K8S引擎(TKE),中国公有云三巨头正式全面支持Rancher Kubernetes平台。 Rancher正式宣布扩大对中国领先Kubernetes服务的支持,华...

RancherLabs
昨天
3
0
【NLP】【八】基于keras与imdb影评数据集做情感分类

【一】本文内容综述 1. keras使用流程分析(模型搭建、模型保存、模型加载、模型使用、训练过程可视化、模型可视化等) 2. 利用keras做文本数据预处理 【二】环境准备 1. 数据集下载:http:...

muqiusangyang
昨天
3
0
nginx 解决session一致性

session 粘滞性 每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题。 upstream backserver {ip_hash;server 192.168.0.14:88;server 192.1...

zhu_kai1
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部