基于JavaScript实现全选、不选和反选效果

利用javascript实现全选、不选和反选效果，这个不用多说，直接来代码，代码中自有注释帮你理解。

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function(){
        // 获取所有的按钮
        var btns = document.getElementsByTagName("button");
        // 获取所有的选项input
        var inputs = document.getElementsByTagName("input");

        // 全选或者不选的时候 调用此函数
        function fun(flag){
          for (var i=0; i<inputs.length;i++) {
            inputs[i].checked = flag;
          }
        }

        //获取第一个按钮 “全选”
        btns[0].onclick = function(){
          fun(true);
        }

        // 获取第二个按钮 "不选"
        btns[1].onclick = function(){
          fun(false);
        }
        // 获取第三个按钮 “反选”
        btns[2].onclick = function(){
          // 遍历所有的选项，判断每一个选项是否被选中
          for (var i=0;i<inputs.length;i++) {
            inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
          }
        }

      }
    </script>
  </head>
  <body>
    <div id="box1">
      <button>全选</button>
      <button>不选</button>
      <button>反选</button>
    </div>
    <div id="box2">
      <ul>
        <li>选项1：<input type="checkbox"></li>
        <li>选项2：<input type="checkbox"></li>
        <li>选项3：<input type="checkbox"></li>
        <li>选项4：<input type="checkbox"></li>
        <li>选项5：<input type="checkbox"></li>
        <li>选项6：<input type="checkbox"></li>
        <li>选项7：<input type="checkbox"></li>
        <li>选项8：<input type="checkbox"></li>
        <li>选项9：<input type="checkbox"></li>

      </ul>
    </div>

  </body>
</html>

效果展示：

其他实现效果，自行查看！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 全选 # 不选 # 反选 # JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的 # javascript实现可全选、反选及删除表格的方法 # javaScript checkbox 全选/反选及批量删除 # js实现checkbox全选和反选示例 # js实现checkbox全选、不选与反选的方法 # JS实现的全选、全不选及反选功能【案例】 # javascript实现简单的全选和反选功能 # js html css实现复选框全选与反选 # js操作CheckBoxList实现全选/反选(在客服端完成) # javascript 全选/反选 # 取消选择效果 # js实现表单项的全选、反选及删除操作示例 # 第一个 # 遍历 # 帮你 # 第二个 # 第三个 # 多说 # 大家多多 # script # window # title # UTF # javascript # btns # document # var # onload # function # charset

返回目录在线咨询

上一篇：语音网站制作冰淇淋视频,联通冰淇淋套餐共享语音是什么？
下一篇：如何在Golang中处理协程中的错误_使用channel传递错误信息

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

基于JavaScript实现全选、不选和反选效果

您的项目需求