• 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对象。

  • 相关阅读:
    开发常用工具
    eclipse官方下载地址
    spring相关下载地址
    Django在windows系统下安装详情
    Python with用法:自动关闭文件原理
    python字符串使用哪种编码格式?
    python浮点数精度问题
    robotframework 自定义库导入 modulenotfounderror
    git 解决 push 时(master|MERGING)
    git撤销对 远程的push&commit提交
  • 原文地址:https://www.cnblogs.com/viola-sh/p/5458193.html
Copyright © 2020-2023  润新知