复选框全选

最新推荐文章于 2023-12-04 10:57:08 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2023-12-04 10:57:08 发布

阅读量204

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Guoyu1_/article/details/103604969

版权

js 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>复选框</title>

  <style type="text/css">

  </style>
</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 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;
      }
    }
  }
  //全选函数
  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;
    }
  }

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="list">
  <li><input name="test" type="checkbox" class="checked-item"> 1.测试数据1</li>
  <li><input name="test" type="checkbox" class="checked-item"> 2.测试数据2</li>
  <li><input name="test" type="checkbox" class="checked-item"> 3.测试数据3</li>
  <li><input name="test" type="checkbox" class="checked-item"> 4.测试数据4</li>
  <li><input name="test" type="checkbox" class="checked-item"> 5.测试数据5</li>
  <li><input name="test" type="checkbox" class="checked-item"> 6.测试数据6</li>
</ul>
<input type="button" value="全选" class="btn" id="all" onclick="clickAll()">
<input type="button" value="删除" class="btn" id="delete" onclick="clickDel()">
<script>

  var f = false;
  function clickAll() {
    if(f = !f){
      $("li :checkbox").prop("checked", true);
      alert(12)
    }else{
      $("li :checkbox").prop("checked", false);
      alert(34)
    }
  }
  function clickDel(){
    // $("input[name='test']:checkbox").each(function(){
    $("input[class='checked-item']:checkbox").each(function(){
      if($(this).prop("checked")==true){
        $(this).parent('li').remove();
      }
    })
  }

</script>
</body>
</html>

http://www.jzdlink.com/webarticle/javascript/20160820708.html

前端路上迷茫的小鲨鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框全选

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>复选框</title> <style type="text/css"> </style></head><body><i...
复制链接

扫一扫