检查基于Array的复选框 - jQuery

I have a unique checkbox modal window

我有一个独特的复选框模式窗口

<div class="tv-choices" style="display:none;"><!-- turned on via button-->
<div class="choices-title">TV</div>
<div class="choices-checkboxes">
    <div class="category_box">
        <input type="checkbox" id="getf{038}" name="getfItem" value="Adult Animated">
        <label for="get{038}">Adult Animated</label>
    </div>

    <div class="category_box">
        <input type="checkbox" id="getf{9FA}" name="getfItem" value="Anime">
        <label for="get{9FA}">Anime</label>
    </div>

    <div class="category_box">
        <input type="checkbox" id="getf{821}" name="getfItem" value="Award Shows">
        <label for="get{821}">Award Shows</label>
    </div>
</div>

Now I have a multi-dimensional array:

现在我有一个多维数组:

object_with_arrays['genreAry'+ary_Num]

Let's say Array object_with_arrays[genreAry1] has: Adult Animated and Anime but not Award Shows. How would you now get those checkboxes to get checked via jQuery?

假设Array object_with_arrays [genreAry1]具有:成人动画和动画但不是奖励节目。你现在如何通过jQuery检查这些复选框?

Project story: I have 9 generated buttons which create a Modal window on the fly, each modal window serves up a set of checkboxes. Since I'm using 1 modal window I have to clear out the pervious checkboxes. I found this code below which works, but I just can't seem to figure out how to re-populate the checkboxes with my Arrays

项目故事:我有9个生成的按钮,可以动态创建模态窗口,每个模态窗口都提供一组复选框。由于我使用1个模态窗口,我必须清除透明复选框。我发现下面的代码有效,但我似乎无法弄清楚如何用我的数组重新填充复选框

$('.tv-choices').find(':checked').each(function() {
        $(this).removeAttr('checked');
    });

2 个解决方案

#1

$('.modal').find('input[type="checkbox"]').each(function() {
   var state = $.inArray(this.value, object_with_arrays['genreAry1'])!=-1;

   $(this).prop('checked', state);
});

Iterate over the checkboxes, and set the checked property based on wether or not the checkbox value exists in the array ?

迭代复选框,并根据是否设置check属性,数组中是否存在复选框值?

#2

You can filter on attributes with jQuery. If you were only looking for one item, it would be like this:

您可以使用jQuery过滤属性。如果你只是寻找一个项目,它将是这样的:

$('.modal').find('input:checkbox[value="Anime"]').each(function() {
   $(this).prop('checked', true);
});

But since you want to check against a list of values, you can use filter with a callback:

但是,由于您要检查值列表,可以使用带回调的过滤器:

var searchValues = object_with_arrays['genreAry'+ary_Num]; 
//e.g. searchValues == ["Anime", "Adult Animated"]

$('.modal').find('input:checkbox').filter(function() {
   return searchValues.indexOf($(this).val()) >= 0;
}).each(function() {
   $(this).prop('checked', true);
});

If you also want to uncheck all the other checkboxes:

如果您还想取消选中所有其他复选框:

$('.modal').find('input:checkbox').each(function() {
   var checked = searchValues.indexOf($(this).val()) >= 0;
   $(this).prop('checked', checked)
});

#1

$('.modal').find('input[type="checkbox"]').each(function() {
   var state = $.inArray(this.value, object_with_arrays['genreAry1'])!=-1;

   $(this).prop('checked', state);
});