How display data entered in one text box to another text box on checkbox tick?

Question

I'm trying to reflect data entered in one text box to another text box on checkbox tick. The default state of checkbox is checked. The value should change after it is unchecked and gets checked back again. Even though the code seems to be working, the only output I'm getting is '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" /> 

Kindly note that I would like to do this by class.

Here's the fiddle: https://jsfiddle.net/starscream166/n87vLd51/1/

Answer 1

The issue is because this refers to the checkbox . Hence this.value , which you place in the value of the textboxes, it the string 'on'.

To fix this place the val() of .add1 in to .add2 , as in the below example. Also note the use of change instead of click when dealing with checkboxes, as it improves accessibility.

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

Pass $('.add2').val() the result of $('.add1').val()

.val() can be used to retrieve or assign an input's value. It can be called without a parameter, which will return the string value of the input. Or, it can be called with a parameter which will assign the value to the input.

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

Please check here: https://jsfiddle.net/4kp3msax/1/ OR you can do the following code.

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

Answer 4

Works when any of one field data changed

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