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

Posted 2023-05-09

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

【英文标题】：How display data entered in one text box to another text box on checkbox tick?

【发布时间】：2019-02-18 10:12:23

【问题描述】：

我正在尝试将在一个文本框中输入的数据反映到复选框勾选上的另一个文本框中。复选框的默认状态为选中状态。该值应在取消选中并再次检查后更改。尽管代码似乎可以正常工作，但我得到的唯一输出是“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/

【问题讨论】：

The value should change after it is unchecked 哪个值？

循环中只有一个 if 部分会被执行一次。另一方面，没有其他部分说明应该做什么。

@Cooper 您想在输入更改或复选框更改

上更改第二个输入的文本

文本框中输入的值。我的意思是“选中”是复选框的默认状态。在取消选中时，不会执行任何操作，并且在返回时，在第一个文本框中输入的值必须反映在第二个文本框中。

更改复选框时，Maheer Ali。

【参考方案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" />

【参考方案2】：

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

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

【参考方案3】：

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

【参考方案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" />