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

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”。

要修复此问题，请将.add1的val() .add1 .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" /> 

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/或者您可以执行以下代码。

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

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