javascript - 无法获得选中单选按钮的值
问题描述
这是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 变量记录未定义的日志,我做错了什么吗?
解决方案
当页面加载时,您会收到选中的收音机。相反,您需要在单击按钮时获取它。
为此,在事件处理程序中移动选择器:
$('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 对象的变量的命名约定是在它们的名称前加上 a 前缀,$
就像我在上面的示例中所做的那样。
其次,在处理表单时,挂钩到本身的事件,而不是submit
按钮的事件。这是出于可访问性的原因。它在语义上也更好。form
click
submit
推荐阅读
- sql - 如何找出查询的哪一部分导致错误?
- javascript - 请求功能代码未在 Gauge 中执行
- python - keras 数据增强 cnn 总是期望分类器输出中有一个神经元?
- php - 谁能帮我解决“遇到一个错误不存在的类:recaptchalib”的问题
- windows - 批处理,处理路径中的空格
- r - 如何从对回归模型有很大影响的数据集中删除两个数据点
- python - 如何指定要分配给 hive 中的查询的最大 vcores?
- javascript - JQuery手风琴没有在循环中初始化
- python - 具有 __name__ 属性的 Pickle Mock/MagicMock 对象
- asp.net - Telerik 的 RadClientDataSource 控件发送哪些参数