[英]How display data entered in one text box to another text box on checkbox tick?
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'.
即使代码似乎可以正常工作,但我获得的唯一输出是“ 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/ 这是小提琴: https : //jsfiddle.net/starscream166/n87vLd51/1/
The issue is because this
refers to the checkbox
. 问题是因为
this
是指checkbox
。 Hence this.value
, which you place in the value of the textboxes, it the string 'on'. 因此,您在文本框的值中放置的
this.value
就是字符串“ on”。
To fix this place the val()
of .add1
in to .add2
, as in the below example. 要修复此问题,请将
.add1
的val()
.add1
.add2
,如以下示例所示。 Also note the use of change
instead of click
when dealing with checkboxes, as it improves accessibility. 还要注意在处理复选框时使用
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" />
Pass $('.add2').val()
the result of $('.add1').val()
传递
$('.add2').val()
结果$('.add1').val()
.val()
can be used to retrieve or assign an input's value. .val()
可用于检索或分配输入值。 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" />
Please check here: https://jsfiddle.net/4kp3msax/1/ OR you can do the following code. 请在此处检查: https : //jsfiddle.net/4kp3msax/1/或者您可以执行以下代码。
$(".check").click(function() {
if ($(this).is(":checked")) {
var add1 = $('.add1').val();
$('.add2').val(add1);
}
});
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.