javascript解决checked二次全选反选不显示勾的办法,注意不是jquery方法

2023-12-21 20:45:22

看了网上很多解决input的复选框checked，在第二次勾选或全选反选时，出现选中了却不显示勾勾的，都是用jquery的方法去解决，要么prop(),要么attri(),对于只用纯javascrit的前端人员，非常不方便 。

也有用纯javascript解决的方法，但是非常的复杂和不方便，有的上下各一个复选框来判断，有的全选 ,反选,不选,取消各一个框，
其实这些都不用，下面是最简单的方法

<html>
    <head>
        <meta http-equiv="content-Type" Content="text/html;charset=utf-8"/>
        <title>测试复选框的勾勾显示问题</title>
    </head>
    <body>
        <div>
            <input type="checkbox" name="checkall"/>全选/反选</input>
            <table>
                <tr><td><input type="checkbox" name="checktable"/></td><td>1</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>2</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>3</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>4</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>5</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>6</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>7</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>8</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>9</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>10</td></tr>
                <tr><td><input type="checkbox" name="checktable"/></td><td>11</td></tr>
            </table>
        </div>
        <script type="text/javascript">
                var allinput=document.getElementsByName("checkall");
               var input=document.getElementsByName("checktable");

				//点击全选和反选框
                allinput[0].onclick=function(){
                    for(var i=input.length-1;i>=0;i--)
                    {
                    	//判断有没有checked特征
                        if(!input[i].getAttribute('checked'))
                        {
                        	//这句是关键显示勾勾的属性
                            input[i].checked="checked";
                            //设置特性为true,方便你下步操作取值
                            input[i].setAttribute("checked",'true');
                            //判断是否有没选中的行，如果有一个都算不是全选
                            for(var j=input.length-1;j>=0;j--)
                            {
                               if(!input[j].checked && input[j].getAttribute("checked")!=='true')
                               {
                                break;
                               }
                            }
                        }else
                        //这里是反选
                        {
                        //删除特性
                           input[i].removeAttribute("checked");
                           //删除属性，不显示勾勾
                           input[i].checked=null;
                           //也是判断有没有都取消
                           for(var j=input.length-1;j>=0;j--)
                            {
                               if(input[j].checked && input[j].getAttribute("checked")==='true')
                               {
                                break;
                               }
                            }
                        }
                    }
                };

				//这里是单个点击的，选中和取消
                for(var k=input.length-1;k>=0;k--)
                {
                    input[k].onclick=function(){
                        if(this.getAttribute("checked"))
                        {
                            this.checked=null;
                            this.removeAttribute("checked");
                        }else
                        {
                            this.checked="checked";
                            this.setAttribute("checked","true");
                        }
                    }
                }
         </script>   
</body>
</html>

//二次点击全选和反选，没有出显勾，是因为没有搞明白checked的特性和属性的问题，特性和属性有时候是完全不一样的，有时候同样

//这里就不截图了，只需要你把我这代码全复制保存文件名然后访问就一目了然，如果提示var可以换成let

文章来源:https://blog.csdn.net/cdcdhj/article/details/135135632
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。