Question

我有以下HTML代码：

<form id="attorneyRegisterForm">
    <div class="captchaIcons">
        <label class="yourAgeLabel" for="rdo_1">
            <input 
                type="radio" 
                class="yourAgeRadio" 
                id="rdo_1" 
                name="attorneyRegister_age" 
                value="43b5b5755010e47acf5d549de05a205d" 
                title="Moon"
            />
            <i class="icon-moon ageIcons" title="Moon"></i>
        </label>
        ...
        <label class="yourAgeLabel" for="rdo_X">
            <input 
                type="radio" 
                class="yourAgeRadio" 
                id="rdo_X" 
                name="attorneyRegister_age" 
                value="c56f8bd55a15392e1039461c8006385c" 
                title="Flag"
            />
            <i class="icon-flag ageIcons" title="Flag"></i>
        </label>
    </div>
    <a href="#" id="registerAttorneyButton" class="button primary tiny">
        <?php
            _e('Register', 'z');
        ?>
    </a>
</form>

在我的JavaScript文件中，我有以下代码：

var $attorneyRegisterForm       =   $('#attorneyRegisterForm');
var $attorneySubmitForm         =   $('a#registerAttorneyButton');
var $attorneyNonce              =   $('#attorneyNonce');
var $attorneyFirstName          =   $('#attorney_first_name');
var $attorneyLastName           =   $('#attorney_last_name');
var $attorneyEmail              =   $('#attorney_email');
var $attorneyPassword           =   $('#attorney_password');
var $attorneyPasswordConfirm    =   $('#attorney_password_confirm');
var $yourAgeRadio               =   $('#attorneyRegisterForm input[type="radio"]');

if($attorneyRegisterForm.length > 0)
{
    $attorneyRegisterForm.on(
        'submit.attorney',
        function(e)
        {
            $data   =   {
                fName   :   $attorneyFirstName.val(),
                lName   :   $attorneyLastName.val(),
                email   :   $attorneyEmail.val(),
                pass    :   $attorneyPassword.val(),
                passC   :   $attorneyPasswordConfirm.val(),
                age     :   $yourAgeRadio.val(),
                s       :   $attorneyNonce.val()
            };

            console.log($data);

            e.preventDefault();
       }
    );

    $attorneySubmitForm.on(
        'click',
        function(e)
        {
            $attorneyRegisterForm.submit();
            e.preventDefault();
        }
    );
}

现在的问题是，当我从HTML表单中选择radio时，jQuery总是返回第一个radion值，而不是所选值的值。

我的javascript错了吗？或者我应该尝试另一种方法来检索单选按钮吗？

Answer 1

您需要使用:checked选择器

 $('#attorneyRegisterForm input[type="radio"][name="attorneyRegister_age"]:checked')

Answer 2

您可以使用以下jQuery获取名称组的选定单选按钮

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

Answer 3

试试这个，在jquery selector

中添加:checked

 $('.yourAgeRadio:checked').val();

Answer 4

在JS中删除输入类型radio的id。变化

$yourAgeRadio               =   $('#attorneyRegisterForm input[type="radio"]');

到

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

<强>示例

$(document).on('change','input[type="radio"]',function(){
    var $yourAgeRadio =   $('input[type="radio"]:checked');
   alert($yourAgeRadio.val()); 
});

JSFIDDLE DEMO

jQuery .val（）不适用于单选按钮

4 个答案: