使用后退按钮后获取检查值答案

【问题标题】：Getting checked value after using back button使用后退按钮后获取检查值
【发布时间】：2021-05-30 11:03:45
【问题描述】：

我在网页上有以下代码：

<script>
jQuery(function(){ 
    console.log($("[name='type']:checked").val());
})
</script>

<form>
A <input type="radio" name="type" value="A"> &nbsp;&nbsp;
B <input type="radio" name="type" value="B"><br>
<input type="submit" name="submit" value="submit">
</form>

当我加载页面时，控制台中的输出自然是“未定义”。假设我选择了“A”选项，单击提交按钮，然后单击浏览器的后退按钮。 'A' 选项仍然被选中，但控制台输出也仍然是'未定义'。这似乎不对。显然我希望输出为“A”。我做错了什么？

【问题讨论】：

你需要一个事件监听器来监听用户的变化
@charlietfl 我不确定听众将如何提供帮助。我假设你在谈论类似 $("[name='type']").onchange?这将在我检查“A”选项后触发，但在单击后退按钮时不会触发。
您也可以检查是否在页面加载时检查它（对于您的后退按钮问题）
@melvin-hagberg 的 JSFiddle 对我有用 - 提交后，回击会在控制台上显示所选选项。依赖后退按钮的行为似乎很狡猾，但显然它仍然有效。

标签： javascript jquery dom

【解决方案1】：

您确定在运行脚本之前要导入 jQuery 吗？

重新创建此问题时，我只需先导入 jQuery 即可获得您想要的结果。

工作 JS-fiddle：https://jsfiddle.net/961qgy4f/

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

<form>
    <input type="radio" name="type" value="A"> &nbsp;&nbsp;
    <input type="radio" name="type" value="B"><br>
    <input type="submit" name="submit" value="submit">
</form>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<script>
jQuery(function(){ 
    console.log($("[name='type']:checked").val());
});
</script>

</body>
</html>

【讨论】：

谢谢，您的解决方案有效。当然，我正在导入 JQuery，但我认为问题可能出在我正在使用的版本中 - 2.2。使用 3.6 它可以工作，使用 2.2 - 它没有。 ":checked" 属性当然不是问题，因为如果默认选中其中一个选项，它就可以工作。