使用来自二维数组的jquery检查多个复选框

时间:2015-06-10 12:08:13

标签: javascript jquery arrays

我得到像

这样的数组
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>
....

2 个答案:

答案 0 :(得分:2)

您应该根据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);
                    }
                });
        }
    });
});

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

答案 1 :(得分:0)

我建议使用一个对象数组,然后你可以轻松地遍历那个也会明显更快的数组。

像这样的东西

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

    });
});