在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?


108

这是我的代码:

<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。为什么?谁能帮我?

Answers:


226

在您的代码中,jQuery仅查找具有name的输入的第一个实例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()函数返回一个布尔值(true或false),而不是一个元素。


由于此答案一直备受关注,因此我还将提供一个普通的JavaScript代码段。

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>


16

在选择器中,还应该指定要选中的单选按钮:

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]:checked').val());
    });
 });

1
我正在获得“不确定”的价值
Pavan Alapati

@PavanAlapati我们也无法真正地告诉您为什么不同时看到HTML。理想情况下,您将使用您的确切HTML代码段和所使用的代码发布一个新问题。但是,只有在以下情况下才应获得未定义:选择器中的名称与单选按钮的名称不匹配;没有选中任何单选按钮;或选中的单选按钮未分配值。
丹尼斯

7

您可能要更改选择器:

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


7

还有另一种方式。尝试下面的代码

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.