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

Question

当运行下面的代码时，假设检查了male，我希望 jsonObj 看起来像这样

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

然而，它最终看起来像这样。

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

如果我不使用 switch 语句，我似乎可以让它正常工作，但我不明白为什么一个简单的 switch 会导致这个问题？

Answer 1

像许多类似 C 的语言一样，如果您忘记包含 break，Javascript 将会从一个 case 跌落到下一个 case(如所述 here )

所以:

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

应该帮你解决。