在jQuery中，当所有单选按钮具有相同的名称时，如何获取单选按钮的值？

24 浏览
0 Comments

在jQuery中，当所有单选按钮具有相同的名称时，如何获取单选按钮的值？

以下是我的代码：\n


   

      销售促销
      1
      2
      3
      4
      5

\n以下是JS代码：\n

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

\n这是JSFIDDLE链接！每次我点击按钮时，它都返回1。为什么？有人可以帮我吗？

0

3 答案

0 Comments

问题的原因是，在HTML中，多个单选按钮可以具有相同的名称（name属性）。然而，当这些单选按钮具有相同的名称时，使用传统的选择器（例如$('input[name=q12_3]').val()）将无法正确获取选中的单选按钮的值。

解决方法是改变选择器。可以使用属性选择器来选择具有特定名称和选中状态的单选按钮。在jQuery中，可以使用属性选择器来选择name属性为"q12_3"且被选中的单选按钮。代码如下：

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

使用这个代码，可以正确地获取选中的单选按钮的值。

0
0 Comments

问题的出现原因：

- 在选择器中没有指定要获取的是被选中的单选按钮，导致返回的值为undefined。

- 如果选择器中的name属性与单选按钮的name属性不匹配，也会返回undefined。

- 如果没有任何单选按钮被选中，同样会返回undefined。

- 如果被选中的单选按钮没有被赋予一个值，也会返回undefined。

解决方法：

- 在选择器中指定要获取的是被选中的单选按钮，通过:checked伪类选择器，来获取被选中的单选按钮的值。

- 确保选择器中的name属性与单选按钮的name属性匹配。

- 确保至少有一个单选按钮被选中。

- 确保被选中的单选按钮有一个被赋予的值。

以下是使用jQuery获取单选按钮值的示例代码：

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

注意：以上代码中的`q12_3`应该替换为你实际使用的单选按钮的name属性值。

0
0 Comments

问题的原因是在代码中，jQuery只会查找第一个具有名称q12_3的输入框，而该输入框的值为1。而实际上，你需要查找名称为q12_3且被选中的输入框。

解决方法是使用$('input[name=q12_3]:checked').val()来获取选中的单选按钮的值。这将返回选中的单选按钮的值。

以下是使用jQuery解决问题的代码示例：

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

在上述代码中，当用户点击"submit"按钮时，将执行一个事件处理程序。事件处理程序将使用$('input[name=q12_3]:checked').val()来获取选中的单选按钮的值，并通过弹出窗口显示该值。

此外，以上代码与使用.is(":checked")是不同的。jQuery的is()函数返回一个布尔值（true或false），而不是元素。

如果不使用jQuery，也可以使用纯JavaScript来解决这个问题。以下是使用纯JavaScript解决问题的代码示例：

document.querySelector("#submit").addEventListener("click", () => {
  const val = document.querySelector("input[name=q12_3]:checked").value;
  alert(val);
});

在上述代码中，当用户点击"submit"按钮时，将执行一个事件处理程序。事件处理程序将使用document.querySelector("input[name=q12_3]:checked").value来获取选中的单选按钮的值，并通过弹出窗口显示该值。

以上就是解决使用相同名称的单选按钮获取值的问题的方法。无论是使用jQuery还是纯JavaScript，都可以通过选择选中的单选按钮来获取其值。

0