jQuery每个在同一元素上运行多次

Question

When the below is run, assuming that male is checked, I expect jsonObj to look like this

0: Object
    name: "sex"
    value: "male_value"

However, it ends up looking like this.

0: Object
    name: "sex" 
    value: "male_value"
1: Object
    name: "sex" 
    value: "male_value"
2: Object
    name: "sex" 
    value: "male_value"
3: Object
    name: "sex" 
    value: "female_value"

HTML

<div id="form">
    <div id="radio_buttons">
        <input type="radio" name="sex" id="male" value="male_value">Male<br>
        <input type="radio" name="sex" id="female" value="female_value">Female
    </div>
</div>

JAVASCRIPT

function jsonAdd(name, value)
{                   
    item = {};
    item ["name"] = name;
    item ["value"] = value;

    jsonObj.push(item);
}

jsonObj = [];

$("#form input").each(function() {
    //Get Input Type
    type = $(this).attr("type");
    switch(type)
    {
        case "radio":
            if($(this).prop("checked"))
            {
                var name = $(this).attr("name");
                var value = $(this).val();
                jsonAdd(name, value);
            }
        case "checkbox":
            if($(this).prop("checked"))
                {
                    var name = $(this).attr("name");
                    var value = $(this).val();
                    jsonAdd(name, value);
                }
        default:
            var name = $(this).attr("name");
            var value = $(this).val();
            jsonAdd(name, value);
    }
});

I can seem to get it working properly if I don't use a switch statement but I don't understand why a simple switch would be causing this issue?

Answer 1

Javascript, like many C-like languages, will fall through from one case to the next if you forget to include a break (as noted here )

So:

switch(type)
{
    case "radio":
        if($(this).prop("checked"))
        {
            var name = $(this).attr("name");
            var value = $(this).val();
            jsonAdd(name, value);
        }
        break;

    case "checkbox":
        if($(this).prop("checked"))
            {
                var name = $(this).attr("name");
                var value = $(this).val();
                jsonAdd(name, value);
            }
        break;

    default:
        var name = $(this).attr("name");
        var value = $(this).val();
        jsonAdd(name, value);
        break;
 }

should sort you out.

Answer 2

You have forget to add break statements to your switch and in this case default option will run always:

case "radio":
    if($(this).prop("checked"))
    {
        var name = $(this).attr("name");
        var value = $(this).val();
        jsonAdd(name, value);
    }
    break;
case "checkbox":
....