用原生JS做input全选

最新推荐文章于 2023-06-29 09:17:03 发布

dongyang0311

最新推荐文章于 2023-06-29 09:17:03 发布

阅读量5.4k

点赞数

本文链接：https://blog.csdn.net/dongyang0311/article/details/51743406

版权

思路：用document.getElementsByTagName方法选中所有的input，然后循环每一个input，如果其type＝checkbox，则让该checked=check。

同理，全不选也是让该checked=flase 。

输入数字，获取数字的值，拼接成字符串，该字符串为input的id，然后通过document.getElementById的方法，让其checked=true。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <!--第一部分获取标签-->
        <p>head</p>
        <ul>
            <li>JS</li>
            <li>JQ</li>
            <li>HTML</li>
            <li>JAVA</li>
            <li>PHP</li>
        </ul>
        <script type="text/javascript">
            var list = document.getElementsByTagName('li');
            li = list[0];
            document.write(list.length+'<br>');
            document.write(li.innerHTML+'<br>');
        </script>
        <!--第二部分全选-->
        <form>
            请选择你的爱好：<br>
            <input type="checkbox"  id="hobby1">音乐
            <input type="checkbox"  id="hobby2">登山
            <input type="checkbox"  id="hobby3">游泳
            <input type="checkbox"  id="hobby4">阅读
            <input type="checkbox"  id="hobby5">打球
            <input type="checkbox"  id="hobby6">跑步<br>
            <input type="button" value="全选" onclick="checkall();">
            <input type="button" value="全不选" onclick="clearall();">
            <p>请输入您要选择的序号1-6</p>
            <input type="text" id="wb">
            <input type="button" value="确定" onclick="checkone();">
        </form>
        <script type="text/javascript">
            function checkall(){
                var hobby = document.getElementsByTagName('input');
                for( var i = 0; i< hobby.length; i++){
                    if(hobby[i].type=='checkbox'){
                        hobby[i].checked='check';
                    }

                }
            }//第一个函数用于全选
            function clearall(){
                var hobby = document.getElementsByTagName('input');
                for( var i = 0;i<hobby.length;i++){
                    if(hobby[i].type=='checkbox'){
                        hobby[i].checked=false;
                    }
                }
            }//第二个函数用于全不选
            function checkone(){
                var j = document.getElementById('wb').value;
                var str = 'hobby'+j;
                document.getElementById(str).checked = true;
            }//第三个函数用于选中输入的数字对应选项
        </script>
    </body>
</html>

dongyang0311

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生JS做input全选

思路：用document.getElementsByTagName方法选中所有的input，然后循环每一个input，如果其type＝checkbox，则让该checked=check。同理，全不选也是让该checked=flase 。输入数字，获取数字的值，拼接成字符串，该字符串为input的id，然后通过document.getElementById的方法，让其checked=true。<!DO
复制链接

扫一扫