js做全选功能:一个不选中,全选框也取消的效果,这样写为什么不管用呢?:报错 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

js做全选功能:一个不选中,全选框也取消的效果,这样写为什么不管用呢?:报错

kun坤 2020-06-09 13:59:23 35

JavaScript
分享到
取消 提交回答
全部回答(1)
  • kun坤
    2020-06-09 13:59:30

    引用来自“milin”的评论

    直接用jquery好了,写的那么麻烦 以下代码取自: JS, JQUERY实现全选,反选。 其中,我将 <script src="js/jquery-1.8.3.min.js"></script> 改成: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 测试一下,似乎正是你所要的效果。
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <input type="checkbox" value="全选" id="ckAll"/>水果</br>
            <div class="box">
                <input type="checkbox" value="苹果" id="apple"/>苹果
                <input type="checkbox" value="香蕉" id="bann"/>香蕉
                <input type="checkbox" value="橘子" id="origin"/>橘子
            </div>    
            <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
            <script type="text/javascript">
           //给所有 .box input 元素添加 checked =  ckAll 当前的状态;
           //prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。
            $('#ckAll').click(function(){
               $('.box input').prop('checked',$(this).prop('checked'));
                });
                $('.box input').click(function(){
                //each 便利每一个元素,让其执行该函数
                    $('.box input').each(function(){
                        if(!$(this).prop('checked')){
                            $('#ckAll').prop('checked',false);
                            //有一个不满足就 跳出该循环,避免执行下面
                            return false;
                        }else{
                            $('#ckAll').prop('checked',true);
                        }
                    })
                })</script>
        </body>
    </html>
     ######嗯嗯,是这样的,感谢分享!######一个不选中的场景,是否应当写成:if(!select1Input[i].checked){...}? 你少写了属性:checked。######if(!select1Input[i].checked){...}还是不管用###### 提问:
    1. 识别号为"selectAll"的html元素是什么类型?(type="?") 鉴于代表它的变量all 有个属性onclick (all.onclick), 我猜是 type="button"。可是它同时又有一个属性 checked, 我想它可能是 type="checkbox"。因此,我觉得,这个应当设立两个元素:一个 type="button", 一个 type="checkbox"。 请告诉我 元素 "selectAll" 是什么类型(type="?")。
    2. 我不太明白这句话:"一个不选中,全选框也取消的效果"。全选框是否指的是 id="selectAll" 这个元素? "也取消" 是否是指 这个全选框消失?或它的checked 由 true 变为 false? 
    建议: 1.    定义 方法 selectReverse 的代码是否可以改成:
    var selectReverse = reverse.onclick = function(){
        for (var i=0; i<select1Input.length; i++) {
        select1Input[i].checked= !select1Input[i].checked;
        }
    }
    2.   将变量名称 reverse 换成 toggle。Toggle(切换),即使用自定义效果来显示或隐藏匹配的元素。这里,指的是 在  选中/未选中 (checked:true/false) 之间切换。鉴于 reverse 已经被 js 用于颠倒数组中元素的顺序的方法名: reverse(), 这里就不宜再用做其它的意思了。又发现,jQuery 中 toggle() 方法 是用来切换元素的可见状态的。如果是要"全选框也取消",即 全选框也消失, 那么 toggle 就最合适不过了。######回复 @良辰2250 : 我刚发一贴回答。可能正合你意。######回复 @tcxu : 点全选复选框可以全部选中,如果取消其中一个选项,全选复选框就不会选中。我是想让全选复选框与它的选项们之间有一个这样联动的效果呢######回复 @良辰2250 : 谢谢答复。你说:"一个不选中,全选框也取消的效果"。这是什么效果? 看来,全选框指的是 id="selectAll" 这个元素。 "也取消" 指是什么情况?是指 这个全选框消失, 还是指,一旦全选框的 checked 为 false, 其它所有的checkbox 的 checked 都会 是 false?######select1Input[i].checked= !select1Input[i].checked; 嗯,这样会更好######都是复选框:全选、反选、各选项: <label><input id="selectAll" type="checkbox" />全选/取消全选</label> <label><input id="selectReverse" type="checkbox" />反选</label><label><input type="checkbox" name="ability" />js</labe>######
    var selectAll=function (flag){
        for(var i=0;i<select1Input.length;i++){
            select1Input[i].checked=flag;
        }
        all.checked=flag;
    }
    
    难道是这个意思?######和上面的效果也一样######直接用jquery好了,写的那么麻烦######借助于 网上的代码,如: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 有一个弊端:万一那个代码网页找不到(当然,不希望如此),你自己的代码也就无法运行了。我明白了你的用意之后,就尝试修改你的代码。结果发现,不用 JQuery 也会奏效。请测试。
    var all = document.getElementById('selectAll');
    var reverse = document.getElementById('selectReverse');
    var select1Input = document.getElementsByName('ability');
    var selectAll  = function(flag){
    	for (var i=0; i<select1Input.length; i++){
    		select1Input[i].checked = flag;
    	}
    }
    for (var i=0;i<select1Input.length;i++)
    select1Input[i].onclick = function(){
    	all.checked = false;
    }
    var selectReverse = reverse.onclick = function(){
    	for (var i=0; i<select1Input.length; i++) {
    	select1Input[i].checked= !select1Input[i].checked;
    	}
    }
    all.onclick = function(){
    	if (all.checked) {
    		 selectAll(true);
    	}
    	if (!all.checked){
    		 selectAll(false);
    	}
    }
    
     ######谢谢啦我参考了http://www.cnblogs.com/lk4525/p/6513924.html 里面一个计数器,补充了一点######
    /* 全选、不选、反选  */
    var all = document.getElementById('selectAll');
    var reverse = document.getElementById('selectReverse');
    var select1Input = document.getElementsByName('ability');
    var selectAll = function selectAll(flag) {
    	for(var i=0; i<select1Input.length; i++) {
    		select1Input[i].checked = flag;
    	}
    }
    for(var i=0; i<select1Input.length; i++) {
    	select1Input[i].onclick = function() {
    		//引入计数器
    		var sum = 0;
    		for(var j=0; j<select1Input.length; j++) {
    			if(select1Input[j].checked) {
    				sum += 1;
    				if(sum == select1Input.length) {
    					all.checked = true;
    				} else {
    					all.checked = false;
    				}
    			}
    		}
    	}
    }
    var selectReverse = reverse.onclick = function(){
    	for (var i=0; i<select1Input.length; i++) {
    		select1Input[i].checked= !select1Input[i].checked;
    	}
    }
    all.onclick = function() {
    	if(all.checked) {
    		selectAll(true);
    	}
    	if(!all.checked) {
    		selectAll(false);
    	}
    }
     ######
    $(document).on("click", ".checkAll", function (ev) {
        $(this).parents("table").find(".option .checkSingle").prop("checked", $(this).prop("checked"));
    });
    $(document).on("click", ".checkSingle", function (ev) {
        var checked = $(this).parents("table").find(".option .checkSingle:not(:checked)").length == 0;
        $(this).parents("table").find(".checkAll").prop("checked", checked);
    });
    ######回复 @Tis : 嗯嗯,方法有很多######判断全选框是否应该选中,只要判断 单选框的选中数量 和 总数量是否相等。######为什么写到循环里,直接all.checked=flag不可以?并且你click的时候已经改变all了,为什么还要在selectall里面改变下。还有,全选click里面的if意义在哪?直接selectAll(this.checked)不就好了######测试:点全选,再取消一个选项,再选中,会发现全选框居然不选中了。selectAll(flag)在all.onclick的里面是可以全选,但会存在一个如上的问题。所以引入一个计时器(选中的要和全部数一样),这时所有复选框都选中了,全选框才会是选中的状态
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程