在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?
Posted
技术标签:
【中文标题】在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?【英文标题】:In jQuery, how do I get the value of a radio button when they all have the same name? 【发布时间】:2013-08-05 07:00:13 【问题描述】:这是我的代码:
<table>
<tr>
<td>Sales Promotion</td>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
<button id="submit">submit</button>
这里是 JS:
$(function()
$("#submit").click(function()
alert($('input[name=q12_3]').val());
);
);
这里是JSFIDDLE!每次我单击按钮时,它都会返回 1。为什么?谁能帮帮我?
【问题讨论】:
【参考方案1】:在您的代码中,jQuery 只查找名称为q12_3
的输入的第一个实例,在本例中其值为1
。您需要名称为 q12_3
的输入,即 :checked
。
$("#submit").click(() =>
const val = $('input[name=q12_3]:checked').val();
alert(val);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Sales Promotion</td>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
<button id="submit">submit</button>
请注意,上面的代码不与使用.is(":checked")
相同。 jQuery 的 is()
函数返回一个布尔值(真或假)而不是(一个)元素。
因为这个答案一直受到很多关注,所以我还将包括一个普通的 javascript sn-p。
document.querySelector("#submit").addEventListener("click", () =>
const val = document.querySelector("input[name=q12_3]:checked").value;
alert(val);
);
<table>
<tr>
<td>Sales Promotion</td>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
<button id="submit">submit</button>
【讨论】:
【参考方案2】:在您的选择器中,您还应该指定您想要选中的单选按钮:
$(function()
$("#submit").click(function()
alert($('input[name=q12_3]:checked').val());
);
);
【讨论】:
我得到“未定义”值 @PavanAlapati 如果没有看到您的 html,我们也无法真正告诉您原因;理想情况下,您会发布一个新问题,其中包含您的确切 HTML sn-p 和您正在使用的代码。但是,只有在以下情况下,您才应该得到 undefined: 选择器中的名称与单选按钮的名称不匹配;没有选中任何单选按钮;或者选中的单选按钮没有赋值。【参考方案3】:您可能想要更改选择器:
$('input[name=q12_3]:checked').val()
【讨论】:
【参考方案4】:还有另一种方法。试试下面的代码
$(document).ready(function()
$("input[name='gender']").on("click", function()
alert($(this).val());
);
);
【讨论】:
【参考方案5】:$('input:radio[name=q12_3]:checked').val();
【讨论】:
【参考方案6】:演示:https://jsfiddle.net/ipsjolly/xygr065w/
$(function()
$("#submit").click(function()
alert($('input:radio:checked').val());
);
);
【讨论】:
【参考方案7】:使用这个脚本
$('input[name=q12_3]').is(":checked");
【讨论】:
jQuery 的is
函数将返回一个boolean
,在这种情况下它是无用的。以上是关于在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?的主要内容,如果未能解决你的问题,请参考以下文章