精华内容
下载资源
问答
  • JS 原生实现复选框全选反选功能

    千次阅读 2020-05-23 22:51:08
    JS 原生实现复选框全选反选功能 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框。 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就要检测所有的复选框有...

    **

    JS 原生实现复选框全选反选功能

    **

    按钮功能实现思路:
    全选按钮: 直接将全选按钮的状态赋值给每一个 复选框。
    复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就要检测所有的复选框有没有选中,本方法是设置一个开关flag , 来筛选出复选框都选中的情况。
    反选按钮功能:直接将此时按钮的状态取反即可。

    <body>
       <input type="checkbox" id="checkbox">全选 <input type="button" id="btn" value="反选"><br />
       <input type="checkbox" class="inp"> 张三<br />
       <input type="checkbox" class="inp"> 李四 <br />
       <input type="checkbox" class="inp"> 王五
    
       <script>
          let checkbox = document.getElementById('checkbox'); //全选按钮
          let btn = document.getElementById('btn'); //反选按钮
          let inp = document.querySelectorAll('.inp'); // 小按钮
    
          // 设置全选
          checkbox.onclick = function () {
             for (var i = 0; i < inp.length; i++) {
                inp[i].checked = this.checked; // 这个里的 是将全选按钮的状态赋值给所有的inp  
                     }
    
          };
          // 设置小按钮
          // 要个每一个按钮都要绑定点击事件 所以需要循环 , 
          for (let i = 0; i < inp.length; i++) {
             inp[i].onclick = function () {
    
                let flag = true;
                // 每点击一个小按钮 就要检测 所有的小按钮是否都全选了 设置了一个 开关
                for (let i = 0; i < inp.length; i++) {
    
                   if (!inp[i].checked) {
                    flag = false;
                   }
                }
    
                checkbox.checked = flag;
    
             }
          };
    
          // 反选
          btn.onclick = function (){
          
            for(let i = 0 ; i < inp.length ; i++){
    
               if(inp[i].checked){
                  inp[i].checked = false;
                  checkbox.checked = false;
               }else{
                  inp[i].checked = true;    
                  checkbox.checked = true;
               }
            }
          };
    
       </script>
    </body>
    

    实现复选框还有另外一种更加简便的方法:

    功能实现思路: 当复选框的选中个数 等于 复选框的个数 时 ,代表复选框已经全部选中,就要将全选按钮选中。

      for (var i = 0; i < inp.length; i++) {
    
             inp[i].onclick = function () {
    
                let Select = document.querySelectorAll('.inp:checked').length; // 获得此时选中的复选框的数量
    
                //复杂点写法: 
                // if (Select == inp.length) {  // 判断:复选框选中的个数 是否等于 复选框的个数 , 返回值 true / false
    
                //    checkbox.checked = true;
    
                // } else {
    
                //    checkbox.checked = false;
    
                // };
    
                //简便写法:
                checkbox.checked = Select == inp.length;  // 直接将 判断复选框选中的个数 是否等于 复选框的个数的结果赋值给全选按钮
             }
          };
    
    展开全文
  • js复选框全选反选

    2017-09-26 18:01:00
    本篇文章是关于复选框的,有2种形式:1、全选反选由2个按钮实现;2、全选反选由一个按钮实现。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框...

    本篇文章是关于复选框的,有2种形式:1、全选、反选由2个按钮实现;2、全选、反选由一个按钮实现。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>复选框demo</title>
            <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
            <style>
                body{ text-align:center} 
                .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} 
            </style> 
        </head>
        <body>
            <div class="con">
                <span><input type='checkbox' name='select' onclick='allSelect()'>全选</span>
                <span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反选</span>
                <span><input type='checkbox' name='fruit' />苹果</span>
                <span><input type='checkbox' name='fruit' />香蕉</span>
                <span><input type='checkbox' name='fruit' />梨子</span>
                <span><input type='checkbox' name='fruit' />桃子</span>
                <span><input type='checkbox' name='fruit' />西瓜</span>
                
                <br><br><br>
                
                <span><input type='checkbox' id="allBook"  name='allBook' />全选</span>
                <span><input type='checkbox' name='book' />老子</span>
                <span><input type='checkbox' name='book' />尚书</span>
                <span><input type='checkbox' name='book' />周易</span>
                <span><input type='checkbox' name='book' />诗经</span>
                <span><input type='checkbox' name='book' />孟子</span>
                <span><input type='checkbox' name='book' />中庸</span>
                
    <script type="text/javascript">
        //全选
        function allSelect(){
            $("input[name='fruit']").prop("checked", "checked");
            $("input[name='cancel']").removeAttr("checked");
        }
        //反选
        function unAllSelect(){
            $("input[name='fruit']").removeAttr("checked");
            $("input[name='select']").removeAttr("checked");
        }
        //单选
        $("#allBook").click(function(){
            if(this.checked){
    //            $("input[name='book']").attr("checked", true);
                $("input[name='book']").prop("checked", "checked");
              }else{
    //          $("input[name='book']").attr("checked", false);
                $("input[name='book']").removeAttr("checked");
              }
        });
    </script>
    
            </div>
        </body>
    </html>

     

    在实践中碰到一个问题——check全选失效。解决办法,使用prop方法代替attr。

    $("input[name='book']").attr("checked", "checked");
    $("input[name='book']").prop("checked", "checked");
    

    这或许是和jQuery版本有关。

    转载于:https://www.cnblogs.com/jingyi17/p/7598117.html

    展开全文
  • 我的每一个复选框 是 利用 data声明的数组进行循环 遍历出来的 然后当我点击全选反选的时候 我操作了data中的item 遍历修改了 ischeck属性 页面上也是利用这个属性显示选中/非选中 出现的bug 当我反复点击了...

    问题描述

       我的每一个复选框 是 利用 data声明的数组进行循环 遍历出来的

       然后当我点击全选及反选的时候  我操作了data中的item  遍历修改了 ischeck属性  页面上也是利用这个属性显示选中/非选中

    出现的bug  

       当我反复点击了全选后  点击form表单的保存   获取的 表单的value中  关于复选框的值  会重复出现多个 例如复选框本身5个 当我反复点击全选5次后  复选框的value变成了25  原因是  利用item 循环的复选框 虽然通过外在修改了他的checked的属性  但是之前渲染的复选框 的值 依然存在

     

    解决办法

    axml 部分

    <form  onSubmit="formSubmit" id="myform">
         <checkbox-group name="members">
             <label class="checkbox" a:for="{{items}}" >
                <checkbox name="checkbox" onChange="checkSingle" data-ckindex="{{index}}" value="{{item}}" checked="{{item.isCheck}}" disabled="{{item.disabled}}" />
                <text class="checkbox-text">{{item.realName}}</text>
             </label>
         </checkbox-group>
         <view class="{{items.length == 0 ? 'hidden' : 'checkbox_right'}}">
               <checkbox value='全选' onChange='checkedAll'></checkbox> 
               <text >一键全选</text>
         </view>
         <button class="btn" formType="submit">保存</button>
    </form>

    js部分

      formSubmit:function(e){
        const params = e.detail.value;
        delete params['members']
        params['members'] = this.data.items.filter((i)=> i.isCheck)
        console.info(params)
      },
      checkSingle:function(e){
        console.info(e)
        let ckval = e.detail.value
        let ckindex = e.currentTarget.dataset.ckindex
        let list = this.data.items.concat();
        list[ckindex]['isCheck'] = ckval;
        this.setData({
          items: list
        })
      },
      checkedAll:function (e) {
        console.info(e)
        let that = this
        let list = that.data.items.concat();
        list.map(o => {
          o.isCheck = e.detail.value;
        });
        that.setData({
          items: JSON.parse(JSON.stringify(list))
        })
      }

    解决思路:

        1.form表单提交的时候 放弃使用 关于复选框的value  统一使用  data中 循环的数组数据

        2.全选 或者单点 某个复选框的时候 都去操作一下 data中的item   开始想循环 考虑到效率 这里利用了索引取值 提高性能

        3. 单点 全选  都操作 data中的数组中的对象   选中 ischeck  => true   取消  ischeck => false 

        4. 最后form表单提交  删除 value中的复选框信息  然后 将data中的复选框信息赋值给 form的value里   这里使用filter过滤 筛掉 ischeck 是false的情况

    展开全文
  • function checkAll() { var object = document....//全选按钮状态 var sonObject=document.getElementsByName("choose"); var length = sonObject.length; if(object[0].checked){ ...
    function checkAll()
    
    {
    var object = document.getElementsByName("changeAll");//全选按钮状态
    var sonObject=document.getElementsByName("choose");
    var length = sonObject.length;
    if(object[0].checked){
    for (var i = 0; i < length; i++)
    {
    sonObject[i].checked=true;
    }
    }
    else{
    for (var j = 0; j < length; j++)
    {
    sonObject[j].checked=false;
    }
    }
    }
    展开全文
  • 今天给大家带来初识Avalon的第二篇文章,复选框全选操作和Avalon+layUI的分页。
  • jquery-ajax ... //检测当前选项并输出,全部选择时激活全选按钮 $("input[type='checkbox']").on("click",function(){ var n=$("input[name='chkb']").length; var m=$("input:checked[name
  • 我们在做列表的时候经常会遇到全选反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id...
  • 关于datatables的全选反选实现 html部分: <table data-toggle="table" class="table table-bordered text-center table-hover" id="customTable"> <thead> <tr class="tr1"> ...
  • js控制页面的全选反选 与获取选中的复选框
  • 一些VS2008快捷键,JS复选框全选反选..
  • 一、需求步骤–实现表格首行复选框全选反选功能 1、当表格第一行thead标签内复选框选中,则tbody标签内复选框全选中;thead标签内复选框未选中,则tbody标签内复选框全部未选中; 2、当tbody标签内复选框全被选中时...
  • < body > < div > ...//全选按钮 ...//全选计数 ...//全选和全不 ...//除全选按钮个数和全不个数0 ...//反选全选按钮 if (content==allCheck.length- 1 ){ all.checked = true ; } } script >
  • window.onload = function() { //全选 //获取全选框 var all = document.getElementsByName("mech"); //获取每一行的副旋律 ...var checks = document.getElementsByName("Ch");...//循环遍历每一行的复选框 f
  • *js控制复选框全选V2.0版本使用说明 * *修复功能:加入同一页面多个复选框全选控制 * *1.在页面中引用该js; *2.在全选框onclick事件中调用doCheck(obj,firstCheckBox)方法:obj:this;firstCheckBox:全选框ID...
  • 功能实现: 1、点击全选和反选按钮,实现复选框全选和部分选的功能 2、点击全选复选框,实现子复选框全选或全不选功能 完整代码: 学号 姓名 班级
  • //全选事件 selAll.onclick= function () { if (selAll.checked == true ){ for ( var i= 0 ; i; i++) { hobbys[i].checked= true ; } } else { for ( var i= 0 ; i; i++) { hobbys[i].checked=...
  • 使用Html+Css+js技术编写一个完整的表格列表内容中 实现 复选框全选 反选效果 1. 具体实现要求如下: (1)当全选按钮选中时:将所有的内容项前面的复选框选中,否则反之。 (2)当反选按钮选中时:将所有的...
  • Js实现全选反选按钮功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox" ...
  • 全选全不选反选篮球羽毛球乒乓球足球橄榄球棒球// 第一种方法// 全选/*$('button全选/全不选反选篮球羽毛球乒乓球足球橄榄球棒球// 全选和全不选举$('.all')代码:```Document全选全不选反选var check_all = ...
  • 复选框实现 全选 反选 全不选的 简单小实例 &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;style type="text/css"&gt; &lt;/...
  • Javascript实现复选框全选/反选功能 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在我们实际的项目之中,经常会遇见一些选择框,这些选择框有个全选的选择框,点击过后便会选择后面...
  • JS复选框全选、全不选、反选练习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选练习</title> <script type="text/javascript"> window....
  • JS自定义复选框全选反选js中常常遇到checkbox全选和反选的问题,这里把我用到的给大家分享下。
  • 全选按钮控制复选框(设置复选框等于全选按钮的this.checked即可实现) 复选框控制全选按钮(每次点击事件,循环检测每个复选框,若有任何一项没选中,将flag设置为false并跳出循环) 代码 <!DOCTYPE html>...
  • ="javascript" > 30 31 var selectAll = ' 全选 ' ; 32 var cancelAll = ' 取消 ' ; 33 34 function selAll(obj){ 35 var col = obj.elements[ " check " ]; 36 for ( var i = 0 ...
  • 全选反选按钮

    2020-03-10 15:04:15
    全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById(‘j_cbAll’); // 全选按钮 // var input = document.querySelector(...
  •  // 如果复选框为true 说明之前是false 需要全选 反之 全不选   if(boxid.checked==false){  selectAllOrNot(false);  }else{  selectAllOrNot(true);  }  }      //实现全选按钮 和 全不选...
  • 复选框全选/反选代码

    2009-03-06 19:00:00
    一个简单的复选框全选/反选功能,蛮简单的,但是也蛮实用的,跟大家分享一下,还请高手多多指教。 function aa(){var a=document.getElementsByName("a")[0].checked;var b=document.getElementsByName("b");for...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,491
精华内容 996
关键字:

js复选框全选反选按钮