                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

这段代码的反选功能为什么实现不了，我自己写的，希望哪个大神帮我一下忙，看看，我做的三个实现复选框选定问题是否对啊

<!DOCTYPE html>
{__NOLAYOUT__}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" role="form">
<input type="checkbox" class="form-control" id="a1">
<input type="checkbox" class="form-control" id="a2">
<input type="checkbox" class="form-control" id="a3">
<input type="checkbox" class="form-control" id="a4">
<button type="button" class="btn btn-default" id="btn1">反选</button>
<button TYPE="button" class="btn btn-default" id="btn2">全选</button>
<button TYPE="button" class="btn btn-default" id="btn3">不选</button>
</form>
<script type="text/javascript" src="jquery-1.12.0.js"></script>
<script type="text/javascript">
$('#btn2').on('click',function(){
for(var i=0;i<$(".form-control").length;i++){
$('.form-control').prop('checked',true);
}
});
$('#btn3').on('click',function(){
for (var i=0;i<$(".form-control").length;i++){
$(".form-control").prop('checked',false);
}
});
$('#btn1').on('click',function(){

var flag = $('.form-control').is(':checked');

if (flag==true) {
$('.form-control').prop('checked', false);
} else {

$('.form-control').prop('checked', true);
}
});
</script>
</body>
</html>

鸭梨同学

2016-01-11

源自：JavaScript进阶篇 6-11

关注问题我要回答

465

操作

收起

1 回答

伊望岁月回答被采纳 +3 积分
2016-01-11

$('#btn1').on('click',function(){
    var flags = $('.form-control');
    for(var i = flags.length; i--;){
      var $flag = $(flags[i]);
      var val = $flag.prop('checked');
      $flag.prop('checked', !val);
    }
});

反选功能改成这样吧，你的代码思路有点问题，没有对所有checkbox进行遍历