zoukankan      html  css  js  c++  java
  • js及jQuery实现checkbox的全选、反选和全不选

    html代码:

    <label><input type="checkbox" id="all"/>全选</label>
    <label><input type="checkbox" id="other"/>反选</label>
    <label><input type="checkbox" id="none"/>不选</label>
    
    <input type="checkbox" value="1" name="check" checked/>
    <input type="checkbox" value="2" name="check"/>
    <input type="checkbox" value="3" name="check" checked/>

    js实现:

    window.onload = function(){
            var all = document.getElementById('all');
            var other = document.getElementById('other');
            var none = document.getElementById('none');
            var arr = new Array();
            var items = document.getElementsByName('check');
    
            all.onclick = function(){
                for(var i = 0;i<items.length;i++){
                    items[i].checked = true;
                }
            }
            other.onclick = function(){
                for(var i = 0; i< items.length; i++){
                    if(items[i].checked){
                        items[i].checked = false;
                    }
                    else{
                        items[i].checked = true;
                    }
                }
            }
            none.onclick = function(){
                for(var i = 0;i < items.length ;i++){
                    items[i].checked = false;
                }
            }
        }

    jQuery实现:

    $(function(){
           $("#all").click(function(){
               $("input[name='check']").each(function(){
                   this.checked = true;
               })
           })
           $("#other").click(function(){
               $("input[name='check']").each(function(){
                   this.checked = !this.checked;
               })
           });
           $("#none").click(function(){
               $("input[name='check']").each(function(){
                   this.checked = false;
               })
           })
       });

    jQuery的实现,一开始写成了$(this)以attr()更改checked属性的方式,如下:

    $(function(){
           $("#all").click(function(){
               $("input[name='check']").each(function(){
                   $(this).attr({checked:true});
               })
           })
           $("#other").click(function(){
               $("input[name='check']").each(function(){
                   $(this).attr({checked:!this.checked});
               })
           });
           $("#none").click(function(){
               $("input[name='check']").each(function(){
                   $(this).attr({checked:false});
               })
           })
       });

    这种写法在点击了反选或者不选之后,全选和反选都不能正常实现功能。

    调用的jQuery版本为jquery-1.11.3.js。查看了jQuery的参考手册,each()中,使用this,指代的是DOM对象,使用$(this)指代的是jQuery对象。

  • 相关阅读:
    navicat安装与激活
    MySQL 安装
    oracle中not in 和 in 的替代写法
    oracle中in和exists的区别
    oracle中nvarchar2()和varchar2()的区别
    oracle稳定执行计划(更改)的方法
    oracle显示转化字段类型
    oracle中varchar2(2)存不了一个汉字的原因
    oracle中索引快速全扫描和索引全扫描的区别
    oracle常见的执行计划
  • 原文地址:https://www.cnblogs.com/viola-sh/p/5458193.html
Copyright © 2011-2022 走看看