关于全选、全不选、反选、联动选择

最新推荐文章于 2022-09-15 01:01:01 发布

小曾西西

最新推荐文章于 2022-09-15 01:01:01 发布

阅读量537

点赞数 2

分类专栏： JavaScript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43718189/article/details/109218975

版权

JavaScript学习日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过点击按钮对多选框进行选择。
先简单的把按钮写上
联动全选就是如果下面的多选框全部选上了，他就自动选上，在这里我用JavaScript封装成了一个函数，
在点击全选和全不选、反选的时候检查一遍是否全选，然后再每个按钮里面调用，使联动的效果更全面。

<style>
	* {
            margin: 0;
            padding: 0;
            list-style: none;
            /*清除a标签的下划线*/
            text-decoration: none;
            /*清除点击边框之后的边框*/
            outline: none;
        }
	.radio{
            width: 500px;
            height: 200px;
        }
</style>
<body>
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button>
    <!--联动选择-->
    <input type="checkbox" name="" id="btn4">
    <div class="radio">
        <input type="checkbox" name="" >
        <input type="checkbox" name="">
        <input type="checkbox" name="">
        <input type="checkbox" name="">
        <input type="checkbox" name="">
        <input type="checkbox" name="">
        <input type="checkbox" name="">
        <input type="checkbox" name="">
    </div>

</body>

JavaScript的代码，首先是获取botton和input的值，这里需要注意的是，我联动选择也是input，再下面的input我用一个div框起来的，就先获取div标签的className，然后再获取div里面的input值

    var oBtn1 = document.getElementById('btn1')
    var oBtn2 = document.getElementById('btn2')
    var oBtn3 = document.getElementById('btn3')
    var oBtn4 = document.getElementById('btn4')
    var oInp = document.getElementsByClassName('radio')[0];
    var oInput  = oInp.getElementsByTagName('input')

封装一个判断下面按钮是否全部选上，如果全部选中，联动按钮就会自动选中，没有全部选中的话，联动按钮就不会选中。

    //封装一个判断、联动的函数
    function panDuan() {
	    var n=0;  //设置一个初始的计数的值
	    for(var j=0;j<oInput.length;j++){//循环判断每个按钮是否是选中状态
		    if(oInput[j].checked==true){//如果是选中的计数值加一
			    n++;
		    }
	    }
	    // console.log(n);
	    // console.log(oInput.length)
	    // console.log(n == oInput.length)

	    if(n == oInput.length){//循环结束判断统计的值和按钮的总数是否相同
		    oBtn4.checked=true; //相同就确定下面全部选中了，上面的也要选中
	    }else{
		    oBtn4.checked=false;
	    }
    }

全选按钮，循环获取每个input使得他们的checked属性都是true

    //全选
    oBtn1.onclick= function () {
        for (var i = 0 ; i <oInput.length ; i++){
        	oInput[i].checked = true;
        }
        //判断按钮是true还是false
	    panDuan();
    }

全不选按钮，循环获取每个input使得他们的checked属性都是false


 //全不选
    oBtn2.onclick= function () {
	    for (var i = 0 ; i < oInput.length; i++){
		    oInput[i].checked = false;
	    }
	    panDuan();
    }

    // console.log(oInput[0].checked)

反选


    //反选
    oBtn3.onclick = function () {
	    for (var i = 0 ; i < oInput.length; i++){
	    	console.log(i);
		   // if(oInput[i].checked == true){
		   // 	console.log(oInput[i].checked)
		   // 	oInput[i].checked = false;
           // }
            switch (oInput[i].checked) {
                case false:
                	oInput[i].checked = true;
                	break;
                case true:
                	oInput[i].checked = false;
            }
	    }
	    panDuan();
    }

联动全选

//联动全选
    oBtn4.onclick=function () {
	    /*判断他是选中还是没选中*/
	    if (this.checked == true) {
		    //如果选中，下面全部选中
		    for (var i = 0; i < oInput.length; i++) {
			    oInput[i].checked = true;
		    }

	    } else {
		    for (var i = 0; i < oInput.length; i++) {
			    oInput[i].checked = false;
		    }
	    }
	   // panDuan();
    }

    for(var i=0;i<oInput.length;i++){//循环给每一个按钮加点击事件
	    oInput[i].onclick=function () {
		    panDuan();
	    }
    }

</script>

小曾西西

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
关于全选、全不选、反选、联动选择

通过点击按钮对多选框进行选择。先简单的把按钮写上联动全选就是如果下面的多选框全部选上了，他就自动选上，在这里我用JavaScript封装成了一个函数，在点击全选和全不选、反选的时候检查一遍是否全选，然后再每个按钮里面调用，使联动的效果更全面。<style> * { margin: 0; padding: 0; list-style: none; /*清除a标签的下划线*/
复制链接

扫一扫