无法获取复选框的值答案

【问题标题】：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

标签： jquery twitter-bootstrap radio-button

【解决方案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，具体取决于您希望操作发生的时间点。

【讨论】：