zoukankan      html  css  js  c++  java
  • js实现全选和取消全选

    HTMl

         <input type="checkbox" name="allCheckBox" />

         <br/>

          <input type="checkbox" name="checkbox" />

           <input type="checkbox" name="checkbox" />

          <input type="checkbox" name="checkbox" />

    js
    <script>
        // $().attr('data-id')
        // $().data('id')
        //判断全选 或者 全不选
    $('input[name="allCheckBox"]').click(function(){
      if($(this).is(':checked')){
        $('input[name="checkbox"]').each(function(){
          //此处如果用attr,会出现第三次失效的情况
          $(this).prop("checked",true);
        });
            var num=0;
            $('.jr').each(function(){
                num += parseFloat($(this).text());
            });
            $('#J_Total').text(num);



      }else{
        $('input[name="checkbox"]').each(function(){
          $(this).prop("checked",false);
        });
            $('#J_Total').text('0.00');
      }
    });

    //判断当全选时 若有一个不选 全选按钮为不选状态
    $('input[name="checkbox"]').click(function(){
      var checkedLength = $("input[name='checkbox']:checked").length;
      var checkLength = $("input[name='checkbox']").length;
        var cont = 0;
        $("input[name='checkbox']:checked").each(function(){
            cont +=parseFloat($(this).parents('.td-chk').siblings('.td-sum').find('.jr').text());
        });
        $('#J_Total').text(cont);

      if(checkLength == checkedLength){
          $("input[name='allCheckBox']").prop("checked",true);
          return true;
        }else{
          $("input[name='allCheckBox']").prop("checked",false);
          return true;
        }
    })
    </script>
  • 相关阅读:
    js画线
    开源Math.NET基础数学类库使用(11)C#计算相关系数
    Cent OS5.2安装Hyper-V集成光盘
    解决oracle11g的ORA-12505问题
    Oracle11g安装出现em.ear
    Entity Framework Code First (八)迁移 Migrations
    Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)
    Waves:类Material Design 的圆形波浪(涟漪)点击特效插件
    多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects
    iOS 复选框风格转换 Switchery 开关效果
  • 原文地址:https://www.cnblogs.com/sheep-fu/p/13496381.html
Copyright © 2011-2022 走看看