如下图:
<head>
<title></title>
<style type="text/css">
div
{
border: 1px solid black;
width: 300px;
height: 100px;
padding: 10px 10px 10px 10px;
margin: 10px auto;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#checkAllorNotAll").click(function () {
//如果使用.attr()则前两次点击的时候有效,当第三次之后点击则无效了,使用.prop很好的解决了这个问题
$(this).siblings("input[type=checkbox]").prop("checked", this.checked);
}); //全选按钮
$("#checkAll").click(function () {
$(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", true);
}); //全不选按钮
$("#checkNotAll").click(function () {
$(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", false);
}); //反选按钮
$("#checkFan").click(function () {
var $chList = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");
$chList.each(function () {
$(this).prop("checked", !this.checked);
});
}); //提交按钮
$("#btnSubmit").click(function (e) {
e.preventDefault();
var hobby = "您的爱好是: ";
var $hobbys = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");
$hobbys.each(function () {
// alert(this);
if (this.checked) {
hobby += this.value + " ";
}
});
alert(hobby);
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" id="checkAllorNotAll" />全选/全不选<br />
<input type="checkbox" value="打篮球" name="che" />打篮球
<input type="checkbox" name="che" value="踢足球" />踢足球
<input type="checkbox" name="che" value="游泳" />游泳
<input type="checkbox" name="che" value="唱歌" />唱歌<br />
<input type="button" id="checkAll" value="全选" />
<input type="button" id="checkNotAll" value="全不选" />
<input type="button" id="checkFan" value="反选" />
<input type="button" id="btnSubmit" value="提交" />
</div>
</body>
jquery实现全选/全不选/反选代码
