今逢一个奇怪之题材,使用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. 后+上一致通博客也一度召开了介绍,表示兄弟元素,这里是挑选兄弟元素中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

并发问题:
点击第一不好jQuery会选中,之后,一直无效。

解析原因

原本问题来在这行代码上:

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

翻开资料发现,jquery在1.6自此展开了部分改变,增加了prop属性。当然,对attr属性也召开了有关变更,改动如下:

  1. jQuery 1.6之前 ,.attr()方法以收获某些 attribute 的价值经常,会回来
    property 的价值,这就是造成了结果的非相同。从 jQuery 1.6 开始,
    .prop()方法 方法返回 property 的价值,而 .attr() 方法返回 attributes
    的价。
  2. 像, selectedIndex, tagName, nodeName, nodeType, ownerDocument,
    defaultChecked, 和 defaultSelected 应使用.prop()方法开展取值或赋值。
    在jQuery1.6事先,这些性使用.attr()方法取得,但是这并无是素的attr属性。他们并未相应的性质(attributes),只有特点(property)。

系资料见:prop和attr区别API

相关文章

网站地图xml地图