javascript - 使用 jQuery 从二维数组中检查多个复选框

Question

我有一个像这样的数组

var favorite = {};
    $.each($(".list input[type='checkbox']:checked"), function(){ 
        if(typeof(favorite[$(this).attr("name")]) == 'undefined'){
            favorite[$(this).attr("name")] = [];
        }           
        favorite[$(this).attr("name")].push($(this).val());
    });

使用一维数组我可以做到:

$('#list [value="'+favorite.join('"],[value="')+'"]').prop('checked',true);

这会产生一个像这样的选择器:

$('#list [value="1"],[value="3"],[value="4"],[value="5"]')

但是我如何从二维数组中生成选择器，例如:

$('#list [Name="Name[]",value="1"],[Name="Name[]",value="3"],[Name="Name[]",value="4"],[Name="Model[]",value="5"]')

我需要选择最喜欢数组中的所有复选框。因为在 ajax Post 之后我丢失了所有选中的复选框，如下所示:

$(function() {
    $('.list input').change(function(e){
            //e.preventDefault();
            var favorite = {};
                $.each($(".list input[type='checkbox']:checked"), function(){ 
                    if(typeof(favorite[$(this).attr("name")]) == 'undefined'){
                        favorite[$(this).attr("name")] = [];
                    }           
                    favorite[$(this).attr("name")].push($(this).val());
                });


        var str;
        str = $.param(favorite);
        
        $.ajax({
            url:'/Search.asp',
            type:'POST',
            data:str,
            dataType:'text',
            success: function(data)
            {
                $("#ExSearchForm").html(data);
                $("#ExSearchForm").find('[value=' + favorite.join('], [value=') + ']').prop("checked", true);
            }
        });
        

    });
});

Html 标记

                <div class="list">
                    <div class="nomination">Make</div>
                    <div class="name">
                    <label class='selected-car'><input type='checkbox' name='Make[]' value='*FAKE*' /><span>*FAKE*<i>0</i></span></label>
<label class='selected-car'><input type='checkbox' name='Make[]' value='AIXAM' /><span>AIXAM<i>2</i></span></label>
<label class='selected-car'><input type='checkbox' name='Make[]' value='ALFA ROMEO' /><span>ALFA ROMEO<i>106</i></span></label>
<label class='selected-car'><input type='checkbox' name='Make[]' value='ALPINA' /><span>ALPINA<i>1</i></span></label>
<label class='selected-car'><input type='checkbox' name='Make[]' value='AUDI' /><span>AUDI<i>686</i></span></label>
<label class='selected-car'><input type='checkbox' name='Make[]' value='BMW' /><span>BMW<i>557</i></span></label>
....

Answer 1

您应该根据最喜欢的对象创建值数组:

$('.list input[type=checkbox]').on('change', function () {
    var favorite = {};

    $('.list input[type=checkbox]:checked').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (favorite[name]) === 'undefined') {
            favorite[name] = [];
        }
        favorite[name].push($el.val());
    });

    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(favorite),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('input[type=checkbox]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value')
                    if (favorite[name] && favorite[name].indexOf(value) !== -1) {
                        $el.prop('checked', true);
                    }
                });
        }
    });
});

注意:但是这种选择器非常复杂并且可能非常慢。