文档章节

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操作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实现全选/全不选只执行一次?

为什么jquery实现全选/全不选只执行一次,就不执行了是什么原因? jquery: html:

小米1120
2015/08/10
360
7
jQuery对表单、表格的操作及更多的应用

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

zhangda89
2011/10/07
0
0
使用jQuery设置元素选中的问题及解决办法

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

阿信sxq
2015/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里大规模数据中心性能分析

郭健美,阿里巴巴高级技术专家,目前主要从事数据中心的性能分析和软硬件结合的性能优化。CCF 系统软件专委和软件工程专委的委员。曾主持国家自然科学基金面上项目、入选上海市浦江人才计划A...

阿里云官方博客
39分钟前
1
0
Coding and Paper Letter(四十四)

资源整理。 1 Coding: 1.Rstudio2019年会“机器学习应用”的幻灯片,代码和数据 rstudio conf 2019 2.R语言包sparkxgb,Spark上XGBoost的R接口。 sparkxgb 3.自动SQL注入和数据库接管工具。 ...

胖胖雕
41分钟前
1
0
Ubuntu最新的主要操作系统放弃32位支持?

现在是2018年,2019年即将到来——64位处理器已经成为主流很长一段时间了。如果你仍然使用32位的电脑,那么是时候把它扔进垃圾箱了。 我为所有基于Linux的操作系统维护者感到自豪,他们有勇气...

Linux就该这么学
42分钟前
1
0
Fundebug发布Vue插件,简化BUG监控接入代码

摘要: 代码越短越好! 我们发布了fundebug-vue插件,可以简化Vue框架接入Fundebug的代码。 Vue如何接入Fundebug 1. 安装fundebug-javascript与fundebug-vue npm install fundebug-javascrip...

Fundebug
50分钟前
1
0
MySQL学习笔记之二

数据库的操作总结就是:增删改查(CURD),今天记录一下基础的检索查询工作。 检索MySQL 1.查询表中所有的记录 mysql> select * from apps;+----+------------+-----------------------+------...

凌宇之蓝
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部