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

Question

我正在尝试将在一个文本框中输入的数据反映到复选框勾选上的另一个文本框中。复选框的默认状态为选中状态。该值应在取消选中并再次检查后更改。即使代码似乎可以正常工作，我得到的唯一输出是“on”。

$(".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" />

请注意，我想按班级进行。

这是小提琴：https ://jsfiddle.net/starscream166/n87vLd51/1/

标签： javascriptjqueryhtml

Answer 1

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

要修复这个地方in 到val()，如下例所示。还要注意在处理复选框时使用而不是，因为它提高了可访问性。.add1.add2changeclick

$(".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" />