我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?

我可以得到所有这些:

$("form :radio")

我如何知道选择了哪一个?


当前回答

从这个问题中,我提出了一种替代方法,当您在相应标签的单击事件中时,可以访问当前选定的输入。原因是因为新选择的输入直到其标签的单击事件之后才更新。

TL;博士

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(函数){//这完全不能像上面解释的那样正常工作$(“#报告标签”).click(function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data-method=“click event”]').html(query+'在'+time);});//这是有效的,但在连续单击同一标签时无法更新$('#报告的输入[name=“filter”]').on('change',function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data method=“change event”]').html(查询+'在'+time);});//这是我想出的解决方案$(“#报告标签”).click(function(){var查询=$(“#”+$(this).attr('fr')).val();var time=(new Date()).toString();$('.query[data-method=“click event with this”]').html(query+'at'+time);});});输入[name=“filter”]{显示:无;}#报告的标签{背景色:#ccc;填充:5px;边距:5px;边界半径:5px;光标:指针;}.query查询{填充:5px;边距:5px;}.query:之前{content:“on”attr(数据方法)“:”;}[数据方法=“单击事件”]{颜色:红色;}[数据方法=“更改事件”]{颜色:#cc0;}[数据方法=“单击此事件”]{颜色:绿色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><form id=“reported”><input type=“radio”name=“filter”id=“question”value=“questions”checked=“checked”><label for=“question”>问题</label><input type=“radio”name=“filter”id=“answer”value=“answers”><label for=“answer”>答案</label><input type=“radio”name=“filter”id=“comment”value=“comments”><label for=“comment”>注释</label><input-type=“radio”name=“filter”id=“user”value=“users”><label for=“user”>用户</label><input type=“radio”name=“filter”id=“company”value=“companies”><label for=“company”>公司</label><div class=“query”data method=“click event”></div><div class=“query”data method=“change event”></div><div class=“query”data method=“click event with this”></div></form>

其他回答

要获取id为myForm的表单的选定radioName项的值,请执行以下操作:

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

下面是一个示例:

$('#myForm input').on('change',function(){alert($('input[name=radioName]:checked','#myForm').val());});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><form id=“myForm”><fieldset><legend>选择radioName</legend><label><input-type=“radio”name=“radioName”value=“1”/>1</label><br/><label><input-type=“radio”name=“radioName”value=“2”/>2</label><br/><label><input-type=“radio”name=“radioName”value=“3”/>3</label><br/></fieldset></form>

我编写了一个jQuery插件,用于设置和获取单选按钮值。它还尊重他们身上的“变化”事件。

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

将代码放在任何位置以启用加载项。那就享受吧!它只是重写默认的val函数而不破坏任何东西。

你可以访问这个jsFiddle来尝试它的实际操作,看看它是如何工作的。

不停摆弄

从这个问题中,我提出了一种替代方法,当您在相应标签的单击事件中时,可以访问当前选定的输入。原因是因为新选择的输入直到其标签的单击事件之后才更新。

TL;博士

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(函数){//这完全不能像上面解释的那样正常工作$(“#报告标签”).click(function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data-method=“click event”]').html(query+'在'+time);});//这是有效的,但在连续单击同一标签时无法更新$('#报告的输入[name=“filter”]').on('change',function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data method=“change event”]').html(查询+'在'+time);});//这是我想出的解决方案$(“#报告标签”).click(function(){var查询=$(“#”+$(this).attr('fr')).val();var time=(new Date()).toString();$('.query[data-method=“click event with this”]').html(query+'at'+time);});});输入[name=“filter”]{显示:无;}#报告的标签{背景色:#ccc;填充:5px;边距:5px;边界半径:5px;光标:指针;}.query查询{填充:5px;边距:5px;}.query:之前{content:“on”attr(数据方法)“:”;}[数据方法=“单击事件”]{颜色:红色;}[数据方法=“更改事件”]{颜色:#cc0;}[数据方法=“单击此事件”]{颜色:绿色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><form id=“reported”><input type=“radio”name=“filter”id=“question”value=“questions”checked=“checked”><label for=“question”>问题</label><input type=“radio”name=“filter”id=“answer”value=“answers”><label for=“answer”>答案</label><input type=“radio”name=“filter”id=“comment”value=“comments”><label for=“comment”>注释</label><input-type=“radio”name=“filter”id=“user”value=“users”><label for=“user”>用户</label><input type=“radio”name=“filter”id=“company”value=“companies”><label for=“company”>公司</label><div class=“query”data method=“click event”></div><div class=“query”data method=“change event”></div><div class=“query”data method=“click event with this”></div></form>

$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

试试这个。这对我有用

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