Javascript push multidimensional array only checked checkboxes

869 Views Asked by At

I have checkboxes on page and i want to POST only checked values onchange each checkbox

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

        var str;
        str = $.param(favorite);

        $.ajax({
            url: '/schema.asp',
            type: 'POST',
            data: str,
            dataType: 'text',
            success: function (response) {
                alert(response);
            }
        });
    });
});

But I cant do right syntax to push checked to array

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

Please show the right way.

$(this).attr("name") can vary from (Make[],Model[],Year()) and must be a string

SOLVED:

As nobody answer with full answer, this is finall working code

    $(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: '/schema.asp',
                type: 'POST',
                data: str,
                dataType: 'text',
                success: function (response) {
                    alert(response);
                }
            });
        });
    });
2

There are 2 best solutions below

8
On BEST ANSWER

push is a function to be called, not a property to be set

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

Also, note above you need to check if that property for the object has been set or not in order to initialize it as an array.

$('.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());
            });
  console.log(favorite);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox" name="one" value="1" />
  </li>
  <li>
    <input type="checkbox" name="two" value="2" />
  </li>
  <li>
    <input type="checkbox" name="one" value="1" />
  </li>
  <li>
    <input type="checkbox" name="two" value="2" />
  </li>
  <li>
    <input type="checkbox" name="one" value="1" />
  </li>
</ul>

2
On

use map() in jquery .Translate all items in an array or object to new array of items.

favorite = $(".list input[type='checkbox']:checked").map(function () {
    var obj = {};
    obj[$(this).attr("name")] = this.value;
    return obj;

}).get();

Fiddle Demo