明日碰着3个意外的难点,使用attr给多选框增添checked属性,无效益。通过浏览器查看成分,发现该属性确实已经加多上了,查找原因半天,终于寻找难题。

标题讲述

给多选按钮增加选中效果,css代码如下:

.radio:checked + .radio-wrapper-cube .radio-label-cube {
    background: url('../img/loss_riskmind_checked.png');
    background-repeat: no-repeat;
}

那边顺便介绍一下该css干了些什么事情:

  1. 率先是class为radio的元素,前面跟:checked表示当选的class为radio的因素。
  2. 末尾+上2遍博客也一度做了介绍,表示兄弟元素,这里是选拔兄弟成分里面class为radio-wrapper-cube的要素。
  3. 背后则意味着子成分里面class为radio-label-cube的成分。

看一下html代码:

<td>
<input type="checkbox" style="width:10px;height:10px" class="radio" name="checbox" id="111" value="111">
<div class="radio-wrapper-cube">
 <label for="111" class="radio-label-cube" onclick="checkboxfun($(this))"></label>
</div>
</td>

主要关切圈出来的片段。

image.png

现行反革命啊,小编加一个按键,落成点击一下,就应运而生checkbox的入选效果。完结js如下:

$("#checkbutton").click(function() {
         var maxlength = $("[name='checbox']").length;
        var selectindex = 0;
        var selectall = true;
        $("[name='checbox']:checked").each(function(){

            selectindex++;
            if(maxlength==selectindex){
                selectall = false;
                }
            });
        $("[name='checbox']").attr("checked",selectall);
            if(selectall){
                $("[name='checbox']").parent().parent().addClass("selected");
            }else{
                $("[name='checbox']").parent().parent().removeClass("selected");
            }
        }); 

那里达成的效益为,点击一下全选开关,实现整个当选的法力,上海教室以明身份:

image.png

并发难题:
点击第二次会选中,之后,一向无效。

浅析原因

本来难题出在那行代码上:

$("[name='checbox']").attr("checked",selectall);

翻看资料发现,jquery在一.6后头进展了有的转移,扩大了prop属性。当然,对attr属性也做了相关退换,改造如下:

  1. jQuery 壹.六以前 ,.attr()方法在取有些 attribute 的值时,会回来
    property 的值,那就招致了结果的不平等。从 jQuery 1.6 起先,
    .prop()方法 方法再次来到 property 的值,而 .attr() 方法再次回到 attributes
    的值。
  2. 比如说, selectedIndex, tagName, nodeName, nodeType, ownerDocument,
    defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。
    在jQuery一.陆事先,这几个属性使用.attr()方法得到,可是那并不是因素的attr属性。他们并未有相应的品质(attributes),唯有特点(property)。

连锁质感见:prop和attr区别API

相关文章

网站地图xml地图