Check multiple checkboxes using jQuery from two dimensional array

Question

I have an array like

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

With one dimensional array I can do:

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

Which produces a selector like:

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

But how can I produce a selector from two dimensional array like:

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

I need to select all checkboxes which is in favorite array. Because after ajax Post I lose all checked checkboxes something like that:

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

The Html markup

 <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>
....

• AmmarCSE: I dont think the last selector is valid. It wont work
• Rory McCrossan: I'm pretty sure this is a lot more complicated than it needs to be. Can you describe what you are trying to achieve so we can show you a more efficient way.
• VeNoMiS: $(".list input[type='checkbox']:checked") already return your checked input as jquery object, saving this into a var and use it later $("#ExSearchForm").find(myvar).prop("checked", true); should do the trick
• Taras Romaniv: $("#ExSearchForm").find(myvar) will not work beause of DOM will be completely updated after POST success. So, references to the elements will be cleared too.

Answer 1

You should create array of values based on favorite object:

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

Notice: But such kind of selectors are very complicated and could be extremely slow.

• Taras Romaniv: This selector is similar to your (it can be slow in case if there are thousands of checkboxes).
• Taras Romaniv: But the snippet will be little faster in gerenal than your. Because it caches references to checkbox elements inside each loop and form reference inside success callback.
• Taras Romaniv: This example should be pretty fast. Just try it.
• Taras Romaniv: It was a typo mistake. Just replace a by favorite
• Taras Romaniv: Let us continue this discussion in chat.

Answer 2

I would suggest using an array of objects instead then you can easily iterate over that array which would also be significantly faster.

Something like this

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

• Taras Romaniv: You can not use array of objects because favorite should be serialized later using $.param and passed as param to the $.ajax
• FroboZ: Objects can be serialized too?