Question

我对jquery非常非常新。我试图做一些最有可能对大多数大师来说都是基本的东西，但是我觉得我一直在搞乱它，我必须忽略一些非常简单的东西。

我有一个很大的复选框列表（总共85个），需要根据选择列表中选择的值进行检查。选择列表和复选框都是通过ASP页面/数据库查询动态创建的。

HTML：

<select id="roleID">
    <option data-filter=''>ID</option>
    <option data-filter='200'>200</option>
    <option data-filter='300'>300</option>
    <option data-filter='400'>400</option>
</select>
<BR>
<BR>
<input type="checkbox" data-tags='["200"]'>Create
<br>
<input type="checkbox" data-tags='["200,300"]'>Edit
<br>
<input type="checkbox" data-tags='["200","300, 400"]'>View
<br>
<input type="checkbox" data-tags='["200"]'>Delete
<br>
<input type="checkbox" data-tags='["200"]'>Archive
<br>

SCRIPT：

$(function () {
    $(document).on('change', function (e) {

        var filter = $(this).data('filter');

        $('input[type="checkbox"]').each(function () {
            var $checkbox = $(this);
            var tags = $checkbox.data('tags');
            $.each(tags, function () {
                if (filter == this) $checkbox.prop("checked", !$checkbox.prop("checked"));
            });
        });

    });
});

Answer 1

var filter = $(this).data('filter');行试图从select元素获取数据过滤器值，而不是选定的选项元素。以下是如何获取选择选项的数据过滤器：

var filter = $('option:selected', this).data('filter');

更新小提琴：

http://jsfiddle.net/v9p5C/52/

（小提琴中还有一些其他小错误也是固定的）

Answer 2

你的jQuery需要看起来更像这样：

$(function () {
    $('#roleID').on('change', function (e) {

        var filter = $(this).val();

        $('input[type="checkbox"]').removeAttr('checked');
        $('input[type="checkbox"][data-tags*="'+filter+'"]').attr('checked','checked');

    });
});

这是创建该功能的一种非常简单的方法。你可以在这里查看小提琴：

http://jsfiddle.net/m0nk3y/kjnoovL0/1/

JQuery - 根据选择列表值检查复选框

2 个答案: