廖雪峰官网的jQuery例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/plugins/jquery-1.9.1.js"></script>
<script src="js/selectAll.js"></script>
</head>
<body>
<form id="test-form" action="#">
<legend>请选择想要学习的编程语言:</legend>
<fieldset>
<p>
<label class="selectAll">
<input type="checkbox">
<span class="selectAll">全选</span>
<span class="deselectAll">全不选</span>
</label>
<a href="#0" class="invertSelect">反选</a>
</p>
<p>
<label><input type="checkbox" name="lang" value="javascript"> JavaScript</label>
</p>
<p>
<label><input type="checkbox" name="lang" value="python"> Python</label>
</p>
<p>
<label><input type="checkbox" name="lang" value="ruby"> Ruby</label>
</p>
<p>
<label><input type="checkbox" name="lang" value="haskell"> Haskell</label>
</p>
<p>
<label><input type="checkbox" name="lang" value="scheme"> Scheme</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
</body>
</html>
$(function(){
'use strict';
var
form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
selectAllLabel = form.find('label.selectAll span.selectAll'),
deselectAllLabel = form.find('label.selectAll span.deselectAll'),
invertSelect = form.find('a.invertSelect')
;
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
var flag = false;//是否是全选状态,因为全选和全不选共用选择框
selectAll.change(function () {
if ($(this).prop("checked")) {
if (flag) {//全选变全不选
langs.prop("checked", false);
flag = false;
selectAllLabel.show();
deselectAllLabel.hide();
} else {//全不选变全选
langs.prop("checked", true);
flag = true;
selectAllLabel.hide();
deselectAllLabel.show();
}
}
selectAll.prop("checked", false);//文字变反,选择也相应变反
});
invertSelect.click(function () {
// for (var i = 0; i < langs.length; i++) {
// langs.eq(i).prop("checked", !(langs.eq(i).prop("checked")));
// langs.eq(i).change();
// }
//jQuery可群组操作,简化上面的代码
langs.each(function(n){
$(this).prop( "checked", !($(this).prop("checked")) ).change();
})
});
langs.change(function () {
if ($('input[name="lang"]:checked').length == 5) {
//已全选,显示“全不选”
selectAllLabel.hide();
deselectAllLabel.show();
//已全选,可全不选
flag = true;
selectAll.prop("checked", false);
} else {
//未全选,显示“全选”
selectAllLabel.show();
deselectAllLabel.hide();
//未全选,可全选
flag = false;
selectAll.prop("checked", false);
}
});
});