zoukankan      html  css  js  c++  java
  • jquery复选框

    $("#frmTest :checkbox").attr("checked","true");

    frmTest 为表单from的id   上面代码可以让表单中所有复选框实现全选

    但是

    $("#frmTest :checkbox").attr("checked","flase");却未能取消全选

    正确的取消全选代码是

     $("#frmTest :checkbox").prop("checked",flase);

    注意flase不能加双引号

    同理

    $("#frmTest :checkbox").attr("checked","true");将单选框选中而

    $("#frmTest :checkbox").attr("checked","flase");却未能取消选中

    正确代码为

    $("#frmTest :radio").prop("disabled",flase);

    建议都用prop

    ---------别人的博客-------

    最近项目又用到了这个全选和取消全选的操作.

    以前总是自己写纯JS.现在既然知道怎么写了.那如何用JQ写得更简洁呢.这样也能学到新的东西.如果乎百度一下果然发现了好东东.感谢OSC的iuhoay.

    代码如下:

    [javascript] view plain copy
     
     print?
    1. <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script>  
    2. <script language="JavaScript">  
    3. $(function() {  
    4. $("#ckAll").click(function() {  
    5.     $("input[name='sub']").prop("checked", this.checked);  
    6.   });  
    7.     
    8.   $("input[name='sub']").click(function() {  
    9.     var $subs = $("input[name='sub']");  
    10.     $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);  
    11.   });  
    12. });  
    13. </script>  
    [html] view plain copy
     
     print?
    1. <input type="checkbox" id="ckAll" />check all<br />  
    2. <input type="checkbox" name="sub" />1<br />  
    3. <input type="checkbox" name="sub"/>2<br />  
    4. <input type="checkbox" name="sub"/>3<br />  
    5. <input type="checkbox" name="sub"/>4<br />  


    必须说的是JQ1.6+以上才支持prop哦.关于prop可以看看下面这个.

    今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.

    解决这个文章我参考了这个帖子:

    http://bugs.jquery.com/ticket/9812

    为什么jquery 1.6+增加了.prop()方法,因为在有些浏览器中比如说只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked"。所以,从1.6开始,jq提供新的方法“prop”来获取这些属性。
    以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
    那么,什么时候使用attr,什么时候使用prop??
    1.添加属性名称该属性就会生效应该使用prop.
    2.是有true,false两个属性使用prop.
    3.其他则使用attr
    项目中jquery升级的时候大家要注意这点!
    以下是官方建议attr(),prop()的使用:

    但有以下三点,需要注意(摘自黑暗执行绪):

    1. $(window).attr(), $(document).attr()建议改为$(windows).prop(), $(document).prop(),因为window及document理论上无从加上HTML Attribute,虽然jQuery 1.6.1在内部会偷偷改用.prop(),毕竟语意不合逻辑,应该避免。
    2. 在HTML语法<input type=”checkbox” checked=”checked” />中,checked Attribute只会在一开始将checked Property设成true,后续的状态变更及储存都是透过checked Property。换句话说,checked Attribute只影响初值,之后应以checked Property为准。基于这个理由,$(“:checkbox”).prop(“checked”, true)会比$(“:checkbox”).attr(“checked”, true)来得合理。虽然jQuery 1.6.1已让$(“:checkbox”).attr(“checked”, true)也具有变更checked Property的能力,但prop()确实比attr()写法更吻合背后的实际运作。
    3. 适用此点的Boolean属性包含了: autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

    jQuery Team提供一张DOM元素属性适用attr()/prop()的对照表:

    Attribute/Property.attr().prop()
    accesskey  
    align  
    async
    autofocus
    checked
    class  
    contenteditable  
    defaultValue  
    draggable  
    href  
    id  
    label  
    location *
    multiple
    nodeName  
    nodeType  
    readOnly
    rel  
    selected
    selectedIndex  
    src  
    style  
    tabindex  
    tagName  
    title  
    type  
    width **
  • 相关阅读:
    eclipse 构建 jpa project 所需的用户库(vendor: EclipseLink)
    <mvc:resources mapping="/xxx/**" location="/xxx/"/>无效,可能和Controller的URL模式有关
    面向对象设计的基本原则
    MySql数据库时区异常,java.sql.SQLException: The server time zone value '?й???׼ʱ?' is unrecognized or represents more than one time zone.
    elasticsearch kibana + 分词器安装详细步骤
    neo4j企业版集群搭建
    Elasticsearchdump 数据导入/导出
    Hive环境搭建和SparkSql整合
    Hadoop 集群搭建和维护文档
    HBase 安装snappy压缩软件以及相关编码配置
  • 原文地址:https://www.cnblogs.com/yangAL/p/5167099.html
Copyright © 2011-2022 走看看