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

how to check checkboxes on change of option element using value and rel attributes

本文关键字:选项 元素 复选框 检查 属性 rel value      更新时间:2023-09-26

我有一个包含下拉列表的页面。options元素包含值的id。关于变化,我张贴和做一个sql查询来获取与选项值匹配的所有项目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的

<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查询返回一个"-"分隔的permission_ids列表基于一个查找表,包含2个id的collection_id和permission_id。然后使用Javascript split()拆分权限id列表,然后尝试遍历所有复选框以从rel或value的复选框属性中找到匹配项,两者都可以工作-此时我想将属性checked=checked设置为相应的复选框。我认为我的jQuery是错误的。我知道select on change正在工作,我的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");
        }
    });
}

现在坦白一下。不需要添加属性,我需要用一个选中的图标附加兄弟跨度,因为我使用的是Gumby css框架,这就是处理样式复选框的方式。所以有了正确的选择器,我就能解决这个问题了谢谢大家

选择器创建时出现问题。您使用的是for循环的索引,而不是与该索引匹配的数组元素。在每次循环new array

时遍历每个复选框也是多余的

应该可以

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