jQuery返回复选框为全部选中状态，即使只有一个选中

Question

As per this JSFIDDLE --

I have been going crazy trying to figure this out for last 48 hours. Everything works except for the checkbox. I included the isolated snippet of code that is causing the issue in this.

After I created boxes (pressing checkbox button) and finalize the form, I was successful in seeing code and was able to serialize checkboxes into JSON - but, I ended up getting 'on' for all checkboxes even though if only one of them is checked.

When I checked only one (first box) and other boxes unchecked, and clicked 'save', I get this as result:

{"ck1":"on","ck2":"on","ck3":"on","submit1":"save"}

What was it that threw the result off? Am I doing something wrong in this code?

A help would be appreciated in identifying the issue.
My goal is to see JSON in this format when I have first checkbox checked:

{"ck1":"on","submit1":"save"} or any format that you would suggest.

EDITED:

Find below the function I assinged to submit event:

 $('#form'+formnum).submit( function(e) {
e.preventDefault(e);
var data = {};

//Gathering the Data
$.each(this.elements, function(i, v){
        var input = $(v);
        data[input.attr("id")] = input.val();
 //delete data[button.attr("id")]; <-- cant' figure it out
//removeData[submit] <-- cant' figure it out
}); // end of $.each

var output =JSON.stringify(data);
$('#showurl').text(output);
}); //end of 'save' button function

JSFIDDLE: jsfiddle .

Answer 1

You are getting the value from the checkboxes, and the value is always the same regardless of the state of the checkbox.

Check the type of the element to get the state for checkboxes:

if (input.is(':checkbox')) {
  if (input.is(':checked')) {
    data[input.attr("id")] = input.val();
  }
} else {
  data[input.attr("id")] = input.val();
}

If you only want data from the checkboxes, you can just filter out the the checked checkboxes from start:

$(':checked', this).each(function(i, v){ data[v.id] = v.value; });

Answer 2

You're arbitrarily assigning the value of all inputs, you're not actually checking the checked state.

Add a conditional line for:

data[input.attr("id")] = input.val();

Something like:

if (/* (input is a checkbox and checkbox is checked) or input is not a checkbox*/) {
        data[input.attr("id")] = input.val();
}

You also need an exception for radio buttons.