Question

我采用了此示例中给出的代码： https://api.jquery.com/checked-selector/

数据如下：

---------------------------
|    id   |     data      |  
---------------------------
|    1    |    orange     | 
|    2    |     apple     | 
|    3    |    banana     | 
---------------------------

代码如下（带有Javascript的HTML）：

<form>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div class="log">Log Text</div>
  <label>Select:</label>
  <input class="one" type="text" value="" >
</form>
<script>
$( "input" ).on( "click", function() {
  $( ".log" ).html( $( "input:checked" ).val() + " is checked!" );
});
$( "input" ).on( "click", function() {
    var value = $(this).val();
    $(".one").val(value);
}).keyup();
</script>

图片如下：

当我单击数据时，输入（复选框）与日志文本不同步。

可能是什么原因，我在做什么错？

Answer 1

当您先检查香蕉，然后检查橙色，然后取消选中橙色，或者先检查橙色，然后再检查香蕉时，就会出现图像中出现的情况。

我要指出几件事：

为什么您在同一选择（$("input")上使用了2次单击事件而不是用一个功能来做所有事情？
由于您使用了复选框，并且您的选择基于input和input:checked，因此如果选中了多个复选框，则input:checked只会选中第一个复选框，而不是用户点击的最后一个。
在第二次单击功能中，您使用了keyup()，但我没有这样做的理由。
由于您正在选择input（这是标签名称），因此会影响所有输入，包括one输入。这意味着每次用户单击one输入时，都会无故调用click函数。
由于您使用了click事件，因此即使您取消对项目的调用，也会调用click函数，这很奇怪（除非是您的意图）。

在下面的片段中，我修复了上面提到的所有问题，它简单且有效。希望您能从中学到：D

$(".checkFruit").change(function() {
  if (this.checked) {
    var value = $(this).val();
    $(".log").html(value + " is checked!");
    $(".one").val(value);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <input class="checkFruit" type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input class="checkFruit" type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input class="checkFruit" type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div class="log">Log Text</div>
  <label>Select:</label>
  <input class="one" type="text" value="">
</form>

Answer 2

为什么不像日志中那样使用它呢？ $（“ input：checked”）.val（）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div class="log">Log Text</div>
  <label>Select:</label>
  <input class="one" type="text" value="" >
</form>
<script>
$( "input" ).on( "click", function() {
  $( ".log" ).html( $( "input:checked" ).val() + " is checked!" );
});
$( "input" ).on( "click", function() {
    var value = $( "input:checked" ).val();
    $(".one").val(value);
}).keyup();
</script>

Answer 3

您可以尝试运行我为您提供的代码片段，我刚刚添加了https://code.jquery.com/jquery-3.1.0.js，它很好用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<form>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div class="log">Log Text</div>
  <label>Select:</label>
  <input class="one" type="text" value="" >
</form>
<script>
$( "input" ).on( "click", function() {
  $( ".log" ).html( $( "input:checked" ).val() + " is checked!" );
});
$( "input" ).on( "click", function() {
    var value = $(this).val();
    $(".one").val(value);
}).keyup();
</script>

</body>
</html>

如何在输入框中同步记录输入类型

3 个答案: