javascript - 如何在复选框打勾时将在一个文本框中输入的数据显示到另一个文本框？

Question

我正在尝试将一个文本框中输入的数据反射(reflect)到复选框勾选的另一个文本框中。复选框的默认状态是选中的。该值在取消选中并再次选中后应该会更改。尽管代码似乎可以正常工作，但我得到的唯一输出是“打开”。

$(".check").click(function() {
  if ($(this).is(":checked")) {
    $('.add1').val(this.value) === $('.add2').val(this.value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />

请注意，我想按类(class)进行。

这是 fiddle :https://jsfiddle.net/starscream166/n87vLd51/1/

Answer 1

问题是因为 this 引用了 checkbox。因此 this.value，您放置在文本框的值中，它是字符串“on”。

要解决此问题，请将 .add1 的 val() 放入 .add2，如下例所示。另请注意，在处理复选框时使用 change 而不是 click，因为它提高了可访问性。

$(".check").change(function() {
  if (this.checked) {
    $('.add2').val($('.add1').val());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />