当前位置: 编程技术>jquery
JQuery 复选框全选与反选的例子
来源: 互联网 发布时间:2014-10-04
本文导语: 例子,用jquery实现checkbox 复选框的全选、反选(全不选)。 代码示例: 复选框全选_反选_提交_www. #main{width:300px;margin:200px auto;background-color:green;padding:10px;} ...
例子,用jquery实现checkbox 复选框的全选、反选(全不选)。
代码示例:
复选框全选_反选_提交_www.
#main{width:300px;margin:200px auto;background-color:green;padding:10px;}
$(function () {
//全选/全不选
$("#chkAllAndNot").click(function () {
$(":checkbox[name='love']").attr("checked", $(this).attr("checked"));
});
//全选
$("#btnAll").click(function () {
$(":checkbox[name='love']").attr("checked", true);
});
//全不选
$("#btnNotAll").click(function () {
$(":checkbox[name='love']").attr("checked", false);
});
//反选
$("#btnReverse").click(function () {
var $checks = $(":checkbox[name='love']");
$checks.each(function (index, item) {
item.checked = !item.checked;
});
});
//提交,显示选择的内容
$("#btnCommit").click(function () {
var output = "";
$(":checkbox[name='love']:checked").each(function (index, item) {
if (output == "") {
output = item.value;
}
else {
output += "," + item.value;
}
});
alert(output);
});
});
请选择您的爱好:
全选/全不选
足球
篮球
排球
乒乓球