全选，全不选，反选

最新推荐文章于 2022-04-20 16:59:36 发布

像牛奶却不是牛奶

最新推荐文章于 2022-04-20 16:59:36 发布

阅读量68

点赞数 2

分类专栏：前端文章标签： checkbox javascript

本文链接：https://blog.csdn.net/emmmmmmm__/article/details/109023698

版权

前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

checkbox 选项各种操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
   <br />
      <input type="checkbox" name="love" />篮球
       <br />
      <input type="checkbox" name="love" />排球
    <br />
      <input type="checkbox" name="love" />羽毛球
     <br />
      <input type="checkbox" name="love" />乒乓球
     <br />
     <input type="button" value="全选" onclick="setAll()" />
     <input type="button" value="全不选" onclick="setNo()" />
     <input type="button" value="反选" onclick="setOthers()" />
   
       <script type="text/javascript">
         //全选函数
            function setAll() {
             var loves = document.getElementsByName("love");
               for (var i = 0; i < loves.length; i++) {
                   loves[i].checked = true;
              }
           }
   
            //全不选函数
           function setNo() {
               var loves = document.getElementsByName("love");
               for (var i = 0; i < loves.length; i++) {
                   loves[i].checked = false;
                }
             }

            //反选
          function setOthers() {
               var loves = document.getElementsByName("love");
               for (var i = 0; i < loves.length; i++) {
                     if (loves[i].checked == false)
                       loves[i].checked = true;
                   else
                       loves[i].checked = false;
                }
            }
        
           //全选/全不选操作
           function setAllNo(){
               var box = document.getElementById("boxid");
               var loves = document.getElementsByName("love");
                 if(box.checked == false){
                    for (var i = 0; i < loves.length; i++) {
                        loves[i].checked = false;
                    }
                }else{
                    for (var i = 0; i < loves.length; i++) {
                       loves[i].checked = true;
                        }
               }
          }
        </script>
</body>
</html>

像牛奶却不是牛奶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选，全不选，反选

checkbox 选项各种操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquer
复制链接

扫一扫