JS小功能—实现全选，反选，和不选

最新推荐文章于 2024-04-02 19:39:43 发布

嫌疑-人

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量905

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_39396275/article/details/80778420

版权

javaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

技术点：通过document.getElementsByTagName(‘标签’);来获取多个选择元素，将会导致获取到其他无关的元素,如以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
    var ck=document.getElementsByTagName('input');<!--此时获取的是body里面全部的input标签元素，包括button，与原意不符-->
    };
</script>
<body>
<input id="but1" type="button" value="全选"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</body>
</html>

解决办法：给所要选择的input标签的外层添加一个div,通过该div的id 来获取其中的input标签，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
    var di=document.getElementById('div1');<!--先获取div,再通过div来获取其中的input-->
    var ck=di.getElementsByTagName('input');<!--此时获取的是body里面全部的input标签元素，包括button，与原意不符-->
    var bt1=document.getElementById('but1');
    var bt2=document.getElementById('but2');
    var bt3=document.getElementById('but3');
    bt1.onclick=function(){
        for(i=0;i<ck.length;i++){
            ck[i].checked=true;
            }
    }
    bt2.onclick=function(){
        for(i=0;i<ck.length;i++){
            if(ck[i].checked==true){ck[i].checked=false;}
            else{ck[i].checked=true;}
        }
    }
    bt3.onclick=function(){
        for(i=0;i<ck.length;i++){
            ck[i].checked=false;
        }
    }
};
</script>
<body>
<input id="but1" type="button" value="全选"/>
<input id="but2" type="button" value="反选"/>
<input id="but3" type="button" value="不选"/>
<div id="div1">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>
</body>
</html>

嫌疑-人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS小功能—实现全选，反选，和不选

技术点：通过document.getElementsByTagName(‘标签’);来获取多个选择元素，将会导致获取到其他无关的元素,如以下代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
复制链接

扫一扫