javascript - 命名 html 选项字段和复选框以在 jquery 中正确使用

Question

我正在尝试获取数组中的值然后显示它。这对于我所拥有的来说效果很好 html:
<input id="email" type="email" name="email" required="required" />
jQuery:

    $('#email').on('keyup', updateStatus);
    person[0] = $('#email').val();

但是当我对选项字段或复选框执行此操作时，这不起作用:我总是在选项字段中得到值 Female ，在复选框中得到值 1 。我该如何命名它们才能使其正常工作？

  <input type="radio" id="gender" name="gender" value="Male">Male</input>
  <input type="radio" id="gender" name="gender" value="Female">Female</input>

                <label>        
                    <input type="checkbox" id="chbx1" name="sportart" value="1" />1</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="2" />2</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="3" />3</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="4" />4</label>

还有 jquery:

 $('#gender').on('blur', updateStatus);
    $('#chbx1').on('blur', updateStatus);

     person[3] = $('#gender').val();
        person[4] = $('#chbx1').val();

这是我的 updateStatus 函数:

 function updateStatus() {
    var person = [];
    person[0] = $('#email').val();
    person[1] = $('#passwort').val();
    person[2] = $('#passwortwd').val();
    person[3] = $('#gender').val();
    person[4] = $('#chbx1').val();
    person[5] = $('#hobby').val();


    $('#status').text(JSON.stringify(person));
}

Answer 1

HTML ID 应该唯一。多个项目不能具有相同的 ID。

按 ID (#...) 选择将始终返回一个项。

例如，检查这个片段:

document.write("By name:" + $("[name='gender']").length + "<br/>");
document.write("By ID:" + $("#gender").length + "<br/>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" id="gender" name="gender" value="Male"/>Male
<input type="radio" id="gender" name="gender" value="Female"/>Female
<br/><br/>

您应该将事件分配给名为 sportart 的所有元素，如下所示:

$("input[name='sportart']").on('change', function() {
  alert(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="sportart" value="1" />1<br/>
<input type="checkbox" name="sportart" value="2" />2<br/>
<input type="checkbox" name="sportart" value="3" />3<br/>
<input type="checkbox" name="sportart" value="4" />4

您始终可以使用 :checked 选择器获取选定的 radio 或 checkbox 值:

var arr = $("input[name='sportart']:checked"); // for checkbox it is array
alert(arr.length); // count of selected items
alert(arr[0].value); // value of the first one

$("input[name='gender']:checked").val();