JavaScript按钮全选

最新推荐文章于 2022-10-19 22:43:24 发布

原创最新推荐文章于 2022-10-19 22:43:24 发布 · 413 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用JavaScript实现页面上多个复选框全选与反选的方法。通过获取特定ID和name属性的元素，利用点击事件触发函数，判断全选按钮的状态，从而控制一组复选框的选择状态。

JavaScript按钮全选

1.实现按钮全选，首先用input弄几个选框，代码大概是这个样子的：

    <input type="checkbox" id="ctrl">全选/反选<br>
 <div>
        <input type="checkbox" name="js">JavaScript
        <input type="checkbox" name="js">NodeJS
        <input type="checkbox" name="js">vue
        <input type="checkbox" name="js">react
        <input type="checkbox" name="js">angular
    </div>

2.点击事件，在函数里运用if来判断是false还是true；首先运用getElementById（）；在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。；用getElementsByName();因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
代码为

<script>
 ctrl.onclick=function show(){
     var ctrlAll=document.getElementById('ctrl');
     var sj=document.getElementsByName('js');
     if(ctrlAll.checked==false){
         for(var i=0;i<sj.length;i++){
             sj[i].checked=false;
         }
     }else{
         for(var i=0;i<sj.length;i++){
             sj[i].checked=true;
         }
     }
 }
</script>