javascript练习----复选框全选，全不选，反选

最新推荐文章于 2022-05-20 14:27:40 发布

吴杼恩

最新推荐文章于 2022-05-20 14:27:40 发布

阅读量589

点赞数

分类专栏： JavaScript 相关知识文章标签： javascript学习多选按钮全选多选按钮全不选多选按钮反选

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/42393995

版权

JavaScript 相关知识专栏收录该内容

27 篇文章 0 订阅

订阅专栏

第一种方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{color: #000}
  </style>
<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {  创建20个Li 
  document.write("<li>");
  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”这样后端程序取得时候为数组。
  document.write("</li>");
  }
   document.write("</ul>");
   document.write('<a href="javascript:sall()">全选 </a>'); 此a被点击的时候调用sall方法，此处是调用不是赋值所以要加上“()”。
   document.write('<a href="javascript:nall()">全不选 </a>');
   document.write('<a href="javascript:fall()">反选 </a>');
   var unames=document.getElementsByName("ids[]");
   function sall(){
    for(var i=0;i<unames.length;i++){
      unames[i].checked="true";
    }
   }
    function nall(){
        for(var i=0;i<unames.length;i++){
      unames[i].checked="";
    }
   }
    function fall(){
       for(var i=0;i<unames.length;i++){
        if(unames[i].checked){
           unames[i].checked="";
        }
        else{
           unames[i].checked="true";
        }
    }
   }
</script>
</head>
<body>
</body>
</html>

第二种方式：

<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {
  document.write("<li>");
  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');
  document.write("</li>");
  }
   document.write("</ul>");
   document.write('<label for="sall"><input type="checkbox" id="sall" οnclick="sall(this)">全选</label>');this把当前的checkbox对象传递给函数内部方便调用该checkbox对象。
   var unames=document.getElementsByName("ids[]");
function sall(that){
  for (var i = 0; i <unames.length; i++) {
    unames[i].checked=that.checked;
  }
}
</script>

吴杼恩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript练习----复选框全选，全不选，反选

Document body{color: #000} document.write("");for (var i = 0; i document.write(""); document.write('ffffffffff'); input名字要加“[]”这样后端程序取得时候为数组。 document.write(""); } d
复制链接

扫一扫