复选框中的输入类型如何同步日志

问题描述 投票：0回答：3

我采用了本示例中给出的代码：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>

图片如下：http://s7.picofile.com/file/8382881000/data.png

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

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

javascript html forms
3个回答
0
投票

您为什么不像在日志中那样使用它？$（“ 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>
0
投票

您可以尝试运行我为您提供的代码片段，我刚刚添加了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>
0
投票

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

我会指出几件事：

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

    6. 在下面的摘要中，我修复了上面提到的所有问题，它很简单而且有效。希望您能从中学到：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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.