获取值输入单选按钮 JavaScript

Question

我有一个输入类型单选按钮供用户选择一个值，例如性别。问题是我只为选项一获得的值，当我检查时，我收到类似[DOM] Found 2 elements with non-unique id的警告。我需要这个值，以便我可以使用 ajax 将其传递给数据库。

$('#register').on('click',function(){
var gender=$('#gender').val();
console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
<table class="table">
<tr>
<td><input type="radio" name="gender" id="gender" value="male"> Male</td>
<td><input type="radio" name="gender" id="gender" value="female"> Female</td>
</tr>

<tr>
<td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
</tr>
</table>
</form>

你知道我需要解决这个问题吗？

谢谢

Answer 1

属性id在文档中必须是唯一的，您可以改用class。

您可以将name属性与:checked一起使用作为选择器的一部分。

$('#register').on('click',function(){
var gender=$('[name=gender]:checked').val();
console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
<table class="table">
<tr>
<td><input type="radio" name="gender" class="gender" value="male"> Male</td>
<td><input type="radio" name="gender" class="gender" value="female"> Female</td>
</tr>

<tr>
<td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
</tr>
</table>
</form>

Answer 2

你可以尝试这种方式来实现它

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

$('#register').on('click',function(){
var gender= $('input[name=gender]:checked').val();
console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
<table class="table">
<tr>
<td><input type="radio" name="gender" id="male" value="male"> Male</td>
<td><input type="radio" name="gender" id="female" value="female"> Female</td>
</tr>

<tr>
<td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
</tr>
</table>
</form>

Answer 3

页面上的任何两个或多个元素不能具有相同的ID。

您已将id="gender"输入字段。

您可以将 ID 指定为id="m"(或id="male"(和id="f"(或id="female"(

然后，您可以用户名属性来获取所选单选按钮的值。

在原版 JavaScript 中

var gender = document.querySelector('input[name = "gender"]:checked').value;

Answer 4

两个不同的标签不能使用相同的ID。

您可以修改jQuery函数以使用 name 属性从中提取值，如下所示

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