命名html选项字段和复选框，以便在jquery中正确使用它

Naming html optionfields and checkboxes to use it properly in jquery

本文关键字：jquery 字段 选项 html 复选框 命名      更新时间：2023-09-26

我试图在数组中获得一个值，然后显示它。这对我的这个很有效html:
<input id="email" type="email" name="email" required="required" />
jquery: 

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

，但当我这样做与选项字段或复选框，这不起作用:我总是得到值女性在选项字段和值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));
}

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的元素分配event: 

$("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();

尝试使用change处理程序并使用name属性选择器:

$('input[name=gender], input[name=sportart]').on('change', updateStatus);
person[3] = $('input[name=gender]:checked').val();
person[4] = $('input[name=sportart]:checked').val();

的例子:

var pushStatus = function() {
  var o = {};
  o.gender = $('input[name=gender]:checked').val();
  o.sportart = $('input[name=sportart]:checked').map(function() {
    return this.value;
  }).get().join(',');
  $('#status').html(JSON.stringify(o));
};
$(function() {
  $('input[name=gender], input[name=sportart]').on('change', pushStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
<label>
  <input type="checkbox" name="sportart" value="1" />1</label>
<label>
  <input type="checkbox" name="sportart" value="2" />2</label>
<label>
  <input type="checkbox" name="sportart" value="3" />3</label>
<label>
  <input type="checkbox" name="sportart" value="4" />4</label>
<div id="status"></div>

相关文章：