gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:22:00 24 4
gpt4 key购买 nike

这是 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 变量记录未定义,我做错了什么吗?

最佳答案

当页面加载时,您会收到选中的 radio 。您需要在单击按钮时获取它

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

$('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 对象的变量的命名约定是在它们的名称前加上 $ 前缀,就像我在上面的示例中所做的那样。

其次,在处理表单时, Hook 到 form 本身的 submit 事件,而不是 click 事件提交 按钮。这是出于可访问性原因。它在语义上也更好。

关于javascript - 无法获取选中的单选按钮的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51070336/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com