javascript - 如何在复选框中使用输入类型进行同步日志

Question

我采用了这个例子中给出的代码: https://api.jquery.com/checked-selector/

数据如下:

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

代码如下(HTML 和 Javascript):

<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

当您首先选中香蕉，然后选中橙色，然后取消选中橙色，或者选中橙色然后选中香蕉时，就会发生图像中呈现的场景。

我会指出几件事:

1. 为什么您在同一选择上使用了 2 个点击事件 ($("input")) 而不是在一个函数中完成所有事情？
2. 由于您使用了复选框，并且您的选择基于 input 和 input:checked，因此当选中的复选框超过 1 个时，使用 input:checked 您仅选择第一个选中的复选框，而不是用户单击的最后一个复选框。
3. 在第二次点击函数中，您使用了 keyup()，但我看不出这样做的理由。
4. 由于您选择了input(这是一个标签名称)，因此它会影响每个输入，包括one 输入。这意味着每次用户单击 one 输入时，都会无缘无故地调用单击函数。
5. 由于您使用了 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>