<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选与单选</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>全选和单选，当all选择的时候，single也都被选择；</h1>
<h1>当single们被选择，且single们都被选择的时候，all也被选择</h1>
<p>解决方案：设置一个数组存储对应下标的状态，验证single是否都被</p>
<label><input type="checkbox" name="all">全部</label></br>
<label><input type="checkbox" name="single">single111</label></br>
<label><input type="checkbox" name="single">single22</label></br>
<label><input type="checkbox" name="single">single33</label></br>
<script type="text/javascript">
var singleArr = $('[name="single"]');
var checkarr=[];
checkarr.length = singleArr.length;
// 全选按扭点击的时候
$('[name="all"]').click(function(){
var ischeck = $(this).prop("checked");
$('[name="single"]').prop("checked",ischeck);
isAllCheck();
});
//单选按钮
$('[name="single"]').click(function(){
isAllCheck();
var isall = checkarr.indexOf(false);
if(isall==-1){
$('[name="all"]').prop("checked",true);
}else{
$('[name="all"]').prop("checked",false);
}
});
function isAllCheck(){
for(var i = 0 ;i<singleArr.length;i++){
(function(i){
if(singleArr.eq(i).prop("checked")==true){
checkarr[i]=true;
}else{
checkarr[i]=false;
}
})(i);
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选与单选</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>全选和单选，当all选择的时候，single也都被选择；</h1>
<h1>当single们被选择，且single们都被选择的时候，all也被选择</h1>
<p>解决方案：设置一个数组存储对应下标的状态，验证single是否都被</p>
<label><input type="checkbox" name="all">全部</label></br>
<label><input type="checkbox" name="single">single111</label></br>
<label><input type="checkbox" name="single">single22</label></br>
<label><input type="checkbox" name="single">single33</label></br>
<script type="text/javascript">
var singleArr = $('[name="single"]');
var checkarr=[];
checkarr.length = singleArr.length;
// 全选按扭点击的时候
$('[name="all"]').click(function(){
var ischeck = $(this).prop("checked");
$('[name="single"]').prop("checked",ischeck);
isAllCheck();
});
//单选按钮
$('[name="single"]').click(function(){
isAllCheck();
var isall = checkarr.indexOf(false);
if(isall==-1){
$('[name="all"]').prop("checked",true);
}else{
$('[name="all"]').prop("checked",false);
}
});
function isAllCheck(){
for(var i = 0 ;i<singleArr.length;i++){
(function(i){
if(singleArr.eq(i).prop("checked")==true){
checkarr[i]=true;
}else{
checkarr[i]=false;
}
})(i);
}
}
</script>
</body>
</html>
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
