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/

Answer 1

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

要解决此问题，请将val()的{{1}}插入.add1，如下例所示。另外请注意，在处理复选框时使用.add2代替change，因为它可以提高可访问性。

click

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

Answer 2

将$('.add2').val()的结果传递给$('.add1').val()

.val()可用于检索或分配输入值。可以在不带参数的情况下调用它，该参数将返回输入的字符串值。或者，可以使用将值分配给输入的参数来调用它。

$(".check").click(function() {

  if ($(this).is(":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" />

Answer 3

请在此处检查：https://jsfiddle.net/4kp3msax/1/ 或者，您可以执行以下代码。

AZURE_LOCATION

Answer 4

任何一个字段数据发生更改时都可以工作

let swt_data = "";
$(".add1").on("change", function() {
  swt_data = $(this).val();
})

$(".check").click(function() {

  if ($(this).is(":checked")) {
    if (swt_data != $('#first').val() != $('#second').val()) {
      $('#first').val(swt_data);
      $('#second').val(swt_data)
    }
  }

});

<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="add1" />

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

4 个答案: