无法获取复选框的值
Posted
技术标签:
【中文标题】无法获取复选框的值【英文标题】：Cannot get value of checkbox 【发布时间】：2018-07-30 01:15:06 【问题描述】：我花了一天的时间在这个问题上，你可能会发现它非常基本......我在网上阅读了很多东西，但无法让我的东西正常工作。
我在表单中有一个简单的 2 个单选字段，我想检索选中单选按钮的值。这是我的表格：
<div class="col-xs-6">
<div class="radio radio-inline">
<input type="radio" id="id1" data-toggle="radio" name="deliveryMethod" value="courrier" checked="">
<label for="id1">Courrier</label>
</div>
<div class="radio radio-inline">
<input type="radio" id="id2" data-toggle="radio" name="deliveryMethod" value="local">
<label for="id2">Local</label>
</div>
</div>
我的js是：
$('input[type="radio"]').change(function()
console.log(this.value)
);
我无法获得正确的值。我得到相反的值（选择 Courier 时为本地值，反之亦然）。当我点击标签时，我也会得到这两个值......
我真的迷路了。
非常感谢您的帮助。
【问题讨论】：
你的代码应该可以工作，确保你包含正确的jquery 发布一个工作代码 sn-p 展示您的问题。 您确定没有代码在您的 JS 中进一步修改您的功能吗？ （可能重复？）我创建了一个 JSFiddle 并且它工作正常：jsfiddle.net/4gZAT/1580 【参考方案1】：我刚刚将您的代码粘贴到 jsfiddle 中，它可以正常工作。
https://jsfiddle.net/c42vd3m9/1/
我唯一的想法是你可能复制不正确
$('input[type="radio"]').change(function()
console.log(this.value)
);
到您的文档中。
【讨论】：
【参考方案2】：是的，您的代码正在运行。我也尝试过您的代码。
试试这个https://jsfiddle.net/eaje2ywt/4/
$('input[type="radio"]').change(function()
console.log($(this).val());
);
【讨论】：
【参考方案3】：正如其他人所说，它工作得很好。
这是一个您应该尝试的完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>RadioButton Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-xs-6">
<div class="radio radio-inline">
<input type="radio" id="id1" data-toggle="radio" name="deliveryMethod" value="courrier" checked="">
<label for="id1">Courrier</label>
</div>
<div class="radio radio-inline">
<input type="radio" id="id2" data-toggle="radio" name="deliveryMethod" value="local">
<label for="id2">Local</label>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('input[type="radio"]').change(function()
console.log(this.value)
);
</script>
</body>
</html>额外
如果您想获取第一个值（第一次呈现页面时），那么您应该尝试使用一些 jQuery 函数，例如“准备就绪”或“加载时”。
$(document).ready(function()
// Perform something here...
);
//or
$(document).load(function()
// Perform something here...
);
【讨论】：
谢谢大家。问题一定是不同的。我会继续调查。 但是有效吗？你试过运行我给你的代码吗？不断更新，以便我们解决您的问题。【参考方案4】：根据 w3schools，这是正常行为 https://www.w3schools.com/jsref/event_onchange.asp
定义和用法
onchange 事件发生在 元素已更改。对于单选按钮和复选框， onchange 事件在检查状态发生变化时发生。
提示：此事件类似于 oninput 事件。不同之处在于 oninput 事件在元素的值具有后立即发生 已更改，而 onchange 发生在元素失去焦点时，在 内容已更改。另一个区别是 onchange 事件也适用于元素。
因此，无论何时取消选择单选按钮（通过选择另一个单选按钮），您都会获得它的值。因此，您可以使用 oninput 或 onchange，具体取决于您希望操作发生的时间点。
【讨论】：
以上是关于无法获取复选框的值的主要内容，如果未能解决你的问题，请参考以下文章