无法获取选中的单选按钮的值

时间:2018-06-27 19:45:14

标签: javascript jquery radio-button

这是HTML:

        <form>
            <div class="form-group">
                <div class="checkbox-detailed male_input">
                    <input type="radio" name="gender" id="male" value="male">
                    <label for="male">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Male</span>
                        </span>
                    </span>
                    </label>
                </div>
                <div class="checkbox-detailed female_input" style="margin-left: 25px!important">
                    <input type="radio" name="gender" id="female" value="female">
                    <label for="female">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Female</span>
                        </span>
                    </span>
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-rounded" id="user_submit">Sign In</button>
        </form>

这是javascript部分:

var user_gender = $("input[name='gender']:checked");
var user_submit = $('#user_submit');

user_submit.click(function(){
    console.log(user_gender.val())
});

我还尝试了var user_gender = $("input[name=gender]:checked");(在性别之间没有引号)和var user_gender = $("input:radio[name='gender']:checked");,但仍然没有用。记录的user_gender变量未定义,我做错什么了吗?

2 个答案:

答案 0 :(得分:3)

页面加载时,您会得到选中的收音机。相反,您需要在单击按钮时获取它。

为此,将选择器移到事件处理程序内:

$('form').submit(function(e) {
  e.preventDefault(); // stop the form submission. Remove once you've finished testing
  var $user_gender = $('input[name="gender"]:checked');
  console.log($user_gender.val())
});

这里要注意几件事。首先,如上例所示,包含jQuery对象的变量的命名约定是在其名称前加上$

第二,在处理表单时,请钩住submit本身的form事件,而不是click按钮的submit事件。这是出于可访问性的原因。语义上也更好。

答案 1 :(得分:1)

您要像这样在函数内移动查询:

var user_submit = $('#user_submit');

user_submit.click(function(){
    var user_gender = $("input[name='gender']:checked");
    console.log(user_gender.val())
});

您正在做的是在提交之前获取检查值,这在加载页面时可能什么都没有。