下面代码里全选效果、全不选效果都能实现,但反选就不行,不知道为什么?请高人指点!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
form{
width: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<form>
你爱好的运动是?<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<input type="button" id="CheckedAll" value="全选">
<input type="button" id="CheckedNo" value="全不选">
<input type="button" id="CheckedRev" value="反选">
<input type="button" id="send" value="提交">
</form>
<script type="text/javascript" src="../jquery-3.2.1.js" ></script>
<script type="text/javascript">
var $items = $("[name=items]:checkbox");
//实现全选
$("#CheckedAll").click(function(){
$items.prop("checked",true);
});
//实现全不选
$("#CheckedNo").click(function(){
$items.prop("checked",false);
});
// 实现反选,但是没有用,难道和jQuery版本有关?我的是3.2.1版
var i=0;
$("#CheckedRev").click(function(){
for(i; i < $items.length; i++){
$items[i].prop("checked", !($items[i].checked));
}
});
//书上的实现反选的代码,可以用,但不明白我自己上面写的错在哪里?
// $("#CheckedRev").click(function(){
// $items.each(function(){
// $(this).prop("checked",!$(this).prop("checked"));
// });
// });
</script>
</body>
</html>`
题主应该是想知道自己错在哪里,那我就说下:
还有不懂再来问