• 不同版本的jquery的复选框checkbox的相关问题


    在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷:

    IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现

    但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时

    虽然代码中有checked='checked',但是画面表现都没有打勾。

    例如如下的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
     <!--   引入jQuery -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
     <script type="text/javascript">
      $(function(){
         //全选
         $("#CheckedAll").click(function(){
             $('[name=items]:checkbox').attr('checked', true);
         });
         //全不选
         $("#CheckedNo").click(function(){
            $('[type=checkbox]:checkbox').attr('checked', false);
         });
      })
    
      </script>
    </head>
    <body>
    <form method="post" action="">
       你爱好的运动是?
       <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
       <br/>
        <input type="button" id="CheckedAll" value="全 选"/>
        <input type="button" id="CheckedNo" value="全不选"/>
        <input type="button" id="CheckedRev" value="反 选"/> 
    
        <input type="button" id="send" value="提 交"/> 
    </form>
    </body>
    </html>


    后来查了查资料,发现在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:

    判断是否选中

    $('#checkbox').prop('checked')

    设置选中与不选中状态:

    $('#checkbox').attr('checked',true)

    $('#checkbox').attr('checked',false)

    但此方法在jquery1.9.1及其以后的版本中,就会出现如上文所示的问题,

    后来查找相关的资料,发现现在attr('checked',true)都换成prop('checked',true)

    prop()获取匹配的元素的属性值。
    这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.

    区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
    这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
    还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
    1.添加属性名称该属性就会生效应该使用prop();
    2.是有true,false两个属性使用prop();
    3.其他则使用attr();

    参考:http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

  • 相关阅读:
    《Java基础学习笔记》JAVA修饰符之私有化(Private)
    《Java基础学习笔记》JAVA之静态代码块
    《Java基础学习笔记》JAVA之构造函数和构造代码块
    《Java基础学习笔记》JAVA面向对象
    在C#.NET中,如何生成PDF文件?主要有以下几个途径:(转)
    ckeditor与ckfinder的使用方法 .NET (转载)
    ckeditor3.3.1编辑区自动换行(转)
    iTextSharp 使用详解(转)
    .net DataGrid绑定列手动添加数据
    操作必须使用一个可更新的查询
  • 原文地址:https://www.cnblogs.com/liu-l/p/3862919.html
Copyright © 2020-2023  润新知