zoukankan      html  css  js  c++  java
  • jquery checkbox选中状态以及实现全选反选

    jquery1.6以下版本获取checkbox的选中状态:

     $('.ck').attr('checked');
    
     $('.ck').attr('checked',true);//全选
    
     $('.ck').removeAttr('checked');//全不选

     发现,以上代码,无论input checkbox是选中还是未选中状态,无论IE还是Chrome,返回结果都是undefinded;

     查阅发现:jquery1.6版本对此作了修改,checked属性在页面初始化的时候就已经初始化好了,不会随着状态改变而变。也就是说checkbox在页面加载完毕是选中状态,则永远返回checked,如果一开始没被选中,则永远返回undefinded。

    jquery1.6及以上版本获取checkbox的选中状态:

     $('.ck').prop('checked');
    
     $('.ck').prop('checked',true);//选中
     
     $('.ck').prop('checked', function(i, attr){return !attr;});//反选

    突然想到,可以通过反选实现c/s系统中的RadioBox的单选框功能,如下:

    <div>
        <li style="margin: 5px; float: left; min-200px;min-height:24px;">
            <input class="ckbox" id="ck_0" type="checkbox" checked /><label for="ck_0"></label><!--默认选中css样式参考http://www.csscheckbox.com/checkboxes/1/-->
        </li>
        <li style="margin: 5px; float: left; min-200px;min-height:24px;">
            <input class="ckbox" id="ck_1" type="checkbox" /><label for="ck_1"></label>
        </li>
    </div>

    JS实现单选控制如下:

    //这儿实现的只针对两个checkbox的情况,多个checkbox自由发挥呗
    $('.ckbox').click(function () {
       $('.ckbox').not($(this)).prop('checked', function (i, attr) { return !attr; });//除自身外反选
    });

    效果如下图:

    在Jquery 1.6及之后,新加了一个方法prop(),通过attr方法去获得属性,通过prop方法去获得特性。在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法。

    官方解释prop():获取在匹配的元素集中的第一个元素的属性值。

    大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

    jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

    那么,什么时候使用attr(),什么时候使用prop()?
    1.添加属性名称该属性就会生效应该使用prop();
    2.是有true,false两个属性使用prop();
    3.其他则使用attr();

    以下是官方建议attr(),prop()的使用:

    Attribute/Property

    .attr()

    .prop()

    accesskey

     

    align

     

    async

    autofocus

    checked

    class

     

    contenteditable

     

    draggable

     

    href

     

    id

     

    label

     

    location ( i.e. window.location )

    multiple

    readOnly

    rel

     

    selected

    src

     

    tabindex

     

    title

     

    type

     

    width ( if needed over .width() )

     

  • 相关阅读:
    MySQL主从配置实现(同一台主机)
    MySQL主从配置实现
    FTP的安装配置使用
    NFS的安装配置使用
    Samba的安装配置使用
    Cacti的基本安装配置
    STL标准库-迭代器
    STL标准库-容器-unordered_set
    STL标准库-hash
    STL标准库-容器-rb_tree
  • 原文地址:https://www.cnblogs.com/lcawen/p/6768507.html
Copyright © 2011-2022 走看看