JQuery 复选框全选_反选_提交

最新推荐文章于 2022-08-29 21:58:42 发布

永远爱好写程序

最新推荐文章于 2022-08-29 21:58:42 发布

阅读量1.3k

点赞数

分类专栏： Jquery_基础

本文链接：https://blog.csdn.net/limlimlim/article/details/9235063

版权

Jquery_基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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>复选框全选_反选_提交</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>

永远爱好写程序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 复选框全选_反选_提交

复选框全选_反选_提交 #main{width:300px;margin:200px auto;background-color:green;padding:10px;} $(function () { //全选/全不选 $("#chkAllAnd
复制链接

扫一扫