jQuery 不返回选中的单选值

Question

更新： 问题更复杂。看起来它涉及手风琴头没有正确传递 .click 事件，并且与 :checked 选择器无关。所有此示例在测试文件中都可以正常工作。

请看Radio input in header of accordion problem ?BUG

我有一个包含多个单选元素的表单，每个元素都命名为“rx”（其中 x 为 1..3），应用了 .buttonset()。 与

例如 id=3

alert ($('input:radio[name=r'+id+']').val());
//returns value of the first radio in the set

alert ($('input:radio[name=r'+id+']:checked').val());
//returns 'undefined', even one of the radios is checked.

我已经尝试过:checked')[0]、:checked').get(0)、:checked').attr('id')

我想知道为什么第一个方法返回一个值......它与.buttonset添加类/元素有什么关系吗？？

感谢任何建议！

PS。 $('input:radio[name=r'+id+']').get(0) 返回[object HTMLInputElement]，我猜它应该是这样的。但是这个对象没有 .html() 或 .val() 方法。 $('input:radio[name=r'+id+']:checked').get(0) 仍然是“未定义”。

PPS。强制 ui-helper-hidden-accessible 的可见性 buttonset 不会更改原始单选元素的“已选中”。 我想我可以使用 .ui-state-active 来检查活动无线电...有更好的方法吗？

Answer 1

它不返回值的原因是，当您使用:checked 选择器时，如果未选择单选，它将不会成为结果集的一部分。示例：

<input type="radio" name="r1" value="1" checked="checked" />
<input type="radio" name="r2" value="2" />

现在：

alert($('input:radio[name=r1]').val()); // alerts 1
alert($('input:radio[name=r1]:checked').val()); // alerts 1
alert($('input:radio[name=r2]').val()); // alerts 2
alert($('input:radio[name=r2]:checked').val()); // alerts undefined as the button is not selected

Answer 2

试试这个-

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

Answer 3

阅读关于选择器的页面，尤其是这个http://api.jquery.com/attribute-starts-with-selector/

alert ($(':radio[name^=r]:checked').val());

应该返回选中按钮的值，如果没有被选中，则返回 undefined。

Answer 4

我编写了一个用于设置和获取单选按钮值的 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 来试用它，看看它是如何工作的。

http://jsfiddle.net/ffMathy/MN856/