JQuery 复选框全选与反选的例子
发布时间：2015-12-15 编辑：jiaochengji.com
本文介绍了JQuery实现复选框全选与反选的方法，JQuery 复选框checkbox全选与反选的例子，有需要的朋友参考下。
例子，用jquery实现checkbox 复选框的全选、反选(全不选)。
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>复选框全选_反选_提交_www.jbxue.com</title>
<style type="text/css">
#main{width:300px;margin:200px auto;background-color:green;padding:10px;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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);
});
});
</script>
</head>
<body>
<div id="main">
请选择您的爱好:<br />
<input type="checkbox" id="chkAllAndNot" />全选/全不选<br />
<input type="checkbox" name="love" value="足球" />足球
<input type="checkbox" name="love" value="篮球" />篮球
<input type="checkbox" name="love" value="排球" />排球
<input type="checkbox" name="love" value="乒乓球" />乒乓球<br />
<input type="button" value="全选" id="btnAll" />
<input type="button" value="全不选" id="btnNotAll" />
<input type="button" value="反选" id="btnReverse" />
<input type="button" value="提交" id="btnCommit" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>复选框全选_反选_提交_www.jbxue.com</title>
<style type="text/css">
#main{width:300px;margin:200px auto;background-color:green;padding:10px;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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);
});
});
</script>
</head>
<body>
<div id="main">
请选择您的爱好:<br />
<input type="checkbox" id="chkAllAndNot" />全选/全不选<br />
<input type="checkbox" name="love" value="足球" />足球
<input type="checkbox" name="love" value="篮球" />篮球
<input type="checkbox" name="love" value="排球" />排球
<input type="checkbox" name="love" value="乒乓球" />乒乓球<br />
<input type="button" value="全选" id="btnAll" />
<input type="button" value="全不选" id="btnNotAll" />
<input type="button" value="反选" id="btnReverse" />
<input type="button" value="提交" id="btnCommit" />
</div>
</body>
</html>
您可能感兴趣的文章：
jquery复选框全选/取消示例
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
JQuery实现全选与反选的二种方法
简单实用的全选反选按钮例子
jQuery实现CheckBox全选、全不选的示例代码
方便实用的jQuery checkbox复选框全选功能简单实例
JQuery 复选框全选与反选的例子
js实现checkbox全选与反选的例子
jQuery判断checkbox(复选框)是否选中、全选、反选
JQUERY CHECKBOX全选,取消全选,反选方法三
上一篇：JQuery 权限选择可排序
下一篇：JQuery 基础过滤选择器的例子
[关闭]