Question

我有一个包含下拉列表的页面。 options元素包含值的id。在更改时，我发布并执行sql qry来获取与选项值匹配的所有项ID。然后我想将checked的属性添加到匹配的复选框。如果这是有道理的。

我的选择列表：value属性是collection_id

<select required="" name="groupSelectList" id="groupSelectList">
    <option value="#">Group…</option>
    <option value="1">guest: The default group. Users that have not registered</option>
    <option value="2">customer: The default group for users that are customers and have an account</option>
    <option value="3">support: The default group for users of type Support</option>
    <option value="4">site_admin: The site administrator</option>
    <option value="5">support_admin: For the Support department Manager, VP etc.</option>
    <option value="26">testing group 2: This is another disposable group made just for testing</option>
    <option value="25">testing group 1: This is a disposable group. Group #1</option>
    <option value="24">test43: test43 description</option>
    <option value="23">test from new page: testing group to be deleted</option>
</select>

我的复选框：rel / value属性是permission_id＆＃39;

<ul class="four_up tiles">
    <li class="tile field">
        <label for="delete" class="checkbox">
            <input type="checkbox" rel="1" value="1" id="delete" class="cb" name="checkbox">
            <span></span> delete</label>
    </li>
    <li class="tile field">
        <label for="administrate" class="checkbox">
            <input type="checkbox" rel="2" value="2" id="administrate" class="cb" name="checkbox">
            <span></span> administrate
        </label>
    </li>
    <li class="tile field">
        <label for="view" class="checkbox checked">
            <input type="checkbox" rel="3" value="3" id="view" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> view
        </label>
    </li>
    <li class="tile field">
        <label for="edit" class="checkbox">
            <input type="checkbox" rel="4" value="4" id="edit" class="cb" name="checkbox">
            <span></span> edit
        </label>
    </li>
    <li class="tile field">
        <label for="create" class="checkbox checked">
            <input type="checkbox" rel="5" value="5" id="create" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> create
        </label>
    </li>
    <li class="tile field">
        <label for="Test23" class="checkbox checked">
            <input type="checkbox" rel="6" value="6" id="Test23" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> Test23
        </label>
    </li>
    <li class="tile field">
        <label for="testing24" class="checkbox">
            <input type="checkbox" rel="7" value="7" id="testing24" class="cb" name="checkbox">
            <span></span> testing24
        </label>
    </li>
    <li class="tile field">
        <label for="todays editor" class="checkbox">
            <input type="checkbox" rel="8" value="8" id="todays editor" class="cb" name="checkbox">
            <span></span> todays editor
        </label>
    </li>
    <li class="tile field">
        <label for="perm name here" class="checkbox">
            <input type="checkbox" rel="9" value="9" id="perm name here" class="cb" name="checkbox">
            <span></span> perm name here
        </label>
    </li>
    <li class="tile field">
        <label for="yada ydada ydada" class="checkbox">
            <input type="checkbox" rel="10" value="10" id="yada ydada ydada" class="cb" name="checkbox">
            <span></span> yada ydada ydada
        </label>
    </li>
    <li class="tile field">
        <label for="test46" class="checkbox">
            <input type="checkbox" rel="11" value="11" id="test46" class="cb" name="checkbox">
            <span></span> test46</label>
    </li>
</ul>

和jquery：

// set checks on permissions fieldset
    $("#groupSelectList").on('change', function() {
        var slct = $(this).val();
        //alert(slct);
        $.ajax({
            type: 'post',
            url: 'ajax-processing.php',
            data: {gid: slct, d: 'yes'},
            dataType: 'json',
            success: function(data) {
                var mssg = data.msg;
                var list = mssg.replace(/^-|-$/g,'');
                var itemArr = list.split('-');
                for(var i = 1; i < itemArr.length; i++) {
                    //alert("input[rel='"+[i]+"']");
                    $("input[name='checkbox']").each(function() {
                        if($(this).attr("rel") === [i]) {
                            $("input[rel='"+[i]+"']").attr("checked","checked");
                        }
                    });
                }
                //$("<p class='alert info'>"+data.msg+" cleaned = "+list+"</p>").prependTo("#setPermsToSelectedGroup_");    
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("<p class='alert danger'><i class='entypo icn-thumbs-down'></i>"+errorThrown+"</p>").prependTo("#setPermsToSelectedGroup_");
            }
        });
    });

我的MySQL查询返回＆＃34; - ＆＃34;基于查询表的permission_id分隔列表，该查找表包含2个id为collection_id和permission_id。然后通过Javascript split（）拆分权限ID列表然后我尝试遍历所有复选框以从rel或value的复选框属性中找到匹配，这两者都可以工作 - 此时我想要将checked = checked属性设置为相应的复选框。我认为我的jQuery错了。我知道选择更改正在运行，我的MySql运行，返回的值正是我所期待的。任何帮助将不胜感激。

和回复：

{"error":false,"msg":"5-4-3-2-1-"}

使用评论中建议的选择器和我的一些重新思考是我最终的解决方案。说明如下：

for(var i = 0; i < itemArr.length; i++) {
    $("input[name='checkbox']").each(function() {
        if($(this).attr("rel") === itemArr[i]) {
            var targ = $(".cb[rel='"+itemArr[i]+"']").next();
            $("<i class='entypo icon-check'></i>").appendTo(targ);
            $(".cb[rel='"+itemArr[i]+"']").parent("label").addClass("checked");
        }
    });
}

现在是一个忏悔。该属性不需要添加我需要使用选中的Icon附加兄弟跨度，因为我使用的是Gumby css框架，这就是处理样式复选框的方式。所以使用正确的选择器我能够解决这个问题谢谢你们

Answer 1

问题出在选择器创建中。您正在使用for循环的索引，而不是与该索引匹配的数组元素。在新数组

的循环的每次传递上循环遍历每个复选框也是多余的

这应该有效

for(var i = 1; i < itemArr.length; i++) {             
       $(".cb[rel="+ itemArr[i] +"]").prop('checked', true);       
 }

如何使用value和rel属性检查选项元素更改的复选框

1 个答案: