Question

我在这个问题上花了一天时间，你可能会发现它非常基本...我已经在网上阅读了很多东西但却无法让我的东西工作。

我在表单中有一个简单的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)
});

我无法获得正确的价值。我得到相反的值（当选择Courrier时为本地，反之亦然）。当我点击标签时，我也得到两个值......

我真的输了。

感谢您的帮助。

Answer 1

我只是将您的代码粘贴到jsfiddle中，它可以正常工作。

https://jsfiddle.net/c42vd3m9/1/

我唯一想到的是你可能错误地复制了

$('input[type="radio"]').change(function() {
        console.log(this.value)
});

进入您的文档。

Answer 2

像其他人说的那样，工作得很好。

以下是您应该尝试的完整工作示例：

<!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>

<强> EXTRA

如果你想获得第一个值（当第一次呈现页面时），那么你应该尝试使用一些jQuery函数，比如“on ready”或“on load”。

$(document).ready(function(){
    // Perform something here...

});


//or

$(document).load(function(){
   // Perform something here...
});

Answer 3

是的，你的代码正在运行..我也试过你的代码。

试试这个https://jsfiddle.net/eaje2ywt/4/

$('input[type="radio"]').change(function() {
        console.log($(this).val());
});

Answer 4

根据w3schools，这是正常行为 https://www.w3schools.com/jsref/event_onchange.asp

定义和用法

onchange事件发生时的值为   元素已被更改。对于radiobuttons和复选框，   更改检查状态时发生onchange事件。

提示：此事件类似于 oninput 事件。不同的是   oninput事件在元素的值之后立即发生   更改，而onchange在元素失去焦点后发生   内容已被更改。另一个区别是onchange   事件也适用于元素。

因此，每当您取消选择单选按钮（通过选择另一个）时，您将获得其值。因此，您可以使用oninput或onchange，具体取决于您希望操作发生的位置。

无法获得复选框的值

4 个答案: