JQuery：如何获取选中的单选按钮值？

Question

如何将未选中的单选按钮的默认值设为0？

我有以下HTML：

<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

我有以下代码来获取已选择单选按钮的值

var radio_button_value $('input[name=myradiobutton]:radio').click(function() {var value = $(this).val();});

问题是，当没有选择时，我想将radio_button_value的默认值设置为0。我该如何做到这一点？

我基本上想要执行下面的伪代码（但这不起作用）

var radio_button_value $('input[name=myradiobutton]:radio').click(function() { 
if set
  return $(this).val();
else
  return 0;
});

更新

似乎有些人对我要求的内容产生了困惑。

当页面加载时（在用户甚至还没有选择单选按钮之前），我想要一个函数来返回单选按钮的值为0。

然后，一旦用户选择了单选按钮，同样的函数将返回所选单选按钮的值。

明白我的意思吗？

- StaceyH

---

我不理解这个。如果你点击了单选按钮，肯定会有一个被选中吧？你需要在什么情境下使用它？ - lonesomeday

我想将默认值设置为0，这样当页面加载时，在用户有机会选择单选按钮之前，我的函数将返回0。然后一旦用户选择了单选按钮，它将返回所选属性的值。明白吗？ - StaceyH

差不多了。所以你有一个函数（不是在单选按钮上调用click时）需要知道是否有选定的单选框？ - lonesomeday

Answer 1

$('input[name=myradiobutton]:radio:checked')将获取已选中的单选按钮 $('input[name=myradiobutton]:radio:not(:checked)')将获取未选中的单选按钮

使用这些代码，您可以实现此功能。

$('input[name=myradiobutton]:radio:not(:checked)').val("0");

更新：阅读了你的更新后，我认为我明白了。你需要做类似于这样的事情。

var myRadioValue;

function radioValue(jqRadioButton){
  if (jqRadioButton.length) {
    myRadioValue = jqRadioButton.val();
  }
  else {
    myRadioValue = 0;
  }
}

$(document).ready(function () {
  $('input[name=myradiobutton]:radio').click(function () {   //Hook the click event for selected elements
    radioValue($('input[name=myradiobutton]:radio:checked'));
  });

  radioValue($('input[name=myradiobutton]:radio:checked')); //check for value on page load
});

- John Hartsock

---

但是单选按钮尚未被选中。因此，这本身无法起作用。 - StaceyH

@StaceyH...你想在什么时候进行这个检查？是在表单提交时吗？ - John Hartsock

Answer 2

使用:checked选择器来确定是否选中了一个值：

function getRadioValue () {
    if( $('input[name=myradiobutton]:radio:checked').length > 0 ) {
        return $('input[name=myradiobutton]:radio:checked').val();
    }
    else {
        return 0;
    }
}

更新：您可以随时调用上述函数来获取单选按钮的选定值。您可以在加载时挂钩它，然后每当值更改时使用以下事件：

$(document).ready( function() {
    // Value when you load the page for the first time
    // Will return 0 the first time it's called
    var radio_button_value = getRadioValue();

    $('input[name=myradiobutton]:radio').click( function() {
        // Will get the newly selected value
        radio_button_value = getRadioValue();
    });
}

- Dexter

Answer 3

页面加载后会立即启动。您可以将其放在某些事件下，例如按钮点击。

$("#btn").click(function() { 
var val= $('input[type="radio"]:checked').val();
});

- Ashish Babu

Answer 4

jQuery("input:radio[name=myradiobutton]:checked").val();

- Muhammad Adnan

Answer 5

可能最好的方法（特别是如果您想要能够发布默认值），是拥有一个隐藏的单选按钮，它最初被选中并具有您的默认值。因此，类似于以下内容：

<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />
<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

如果您无法直接修改HTML，可以通过脚本添加：

$(function() {
    $('input[name=myradiobutton]:radio:first').before('<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />');
});

这是一个示例：http://jsfiddle.net/Ender/LwPCv/

- Ender

---

由于我正在使用 .click 方法并且默认值没有被“点击”，因此出于某种原因，这实际上不起作用。 - StaceyH

点击某个元素后，报告的值将是刚刚被点击的元素的值。请参见此修改后的演示：http://jsfiddle.net/Ender/z52PS/ - Ender

Answer 6

要获取所选单选按钮的值，请使用RadioButtonName和包含单选按钮的表单ID。

$('input[name=radioName]:checked', '#myForm').val()

只需通过 OR 运算符

$('form input[type=radio]:checked').val();

- Nadir

Answer 7

这个Jquery方法在页面加载时返回默认值0...

$('input[type="radio"]:checked').val();

- arunsignit

Answer 8

我知道这是一个老问题，但我发现答案不够充分

最简洁的方法是使用以下代码

$(".myRadio").click(function() {
alert($(this).val());   
});

您的表单输入数据应该长这样

<input type="radio" value="40000" name="pay"  class="myRadio" />
<label for="40000">40000</label>

- mindmyweb

Answer 9

这个方法对我有用，希望能帮到你： 要获取被选中的单选框的值，你需要使用单选框名称作为选择器，像这样：

selectedVal = $('input[name="radio_name"]:checked').val();

selectedVal将拥有所需的值，根据您自己的情况更改radio_name，对于您的情况，应该是"myradiobutton"。

selectedVal = $('input[name="myradiobutton"]:checked').val();

- saqibahmad

Answer 10

如果有情况下需要选择某些内容，您应该使用复选框。

根据W3C的规定：

如果一组共享相同控制名称的单选按钮中没有一个初始处于"on"状态，用户代理在选择哪个控件最初处于"on"状态时的行为是未定义的。注意。由于现有实现处理此情况的方式不同，因此当前规范与RFC 1866（[RFC1866]第8.1.2.4节）不同，后者指出：

在任何时候，一组单选按钮中只有一个被选中。如果一组单选按钮的元素都没有指定“CHECKED”，那么用户代理必须最初选中该组的第一个单选按钮。

由于用户代理的行为不同，作者应确保在每组单选按钮中，有一个初始处于"on"状态。

- Gregg B