使用 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

您應該根據favorite對象創建值數組：

$('.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);
                    }
                });
        }
    });
});

注意：但是這種選擇器非常復雜並且可能非常慢。

Answer 2

我建議使用一個對象數組，然后您可以輕松地迭代該數組，這也會明顯更快。

像這樣的東西

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