全选全不选实现
参考廖雪峰JavaScript教程jQuery
index.html
index.js
'use strict';
$(document).ready(function () {
var form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
invertSelect = form.find('a.invertSelect');
// 全选或全不选
selectAll.click(function (e) {
if (selectAll.is(":checked")) {
langs.prop("checked", true);
} else {
langs.prop("checked", false);
}
});
// 反选
invertSelect.click(function (e) {
langs.each(function (index) {
$(this).prop("checked", !$(this).is(":checked"));
});
selectAll.prop("checked", isAllChecked());
});
// 各个选择框
langs.click(function (e) {
selectAll.prop("checked", isAllChecked());
});
// 判断是否全部选中
function isAllChecked() {
return langs.filter(":checked").length == langs.length;
}
});
补充说明：
- 判断多选框是否选中的方法：
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
radio.is(':checked'); // true
类似的属性还有selected
- each接受的函数的第一个参数是index，函数中this是dom对象，不是jquery对象
- 【全选全不选实现】利用过滤器判断是否全选
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 2019女表什么牌子好（如何挑选女士手表？）
- 怎样挑选好的冰淇淋
- 拆书方法训练营
- 别墅庭院设计，不同的别墅庭院设计也给人视觉上完全不一样的！
- 一个选择排序算法
- 甄选句子5.8
- 厨房装修如何选择水槽（一个干净好用的厨房，从这里开始。）
- 既然选择了开始，便只顾一路坚持