Javascript 选中复选框时更改文本输入值

我正在尝试将复选框的值输入到文本输入中

假设输入框为空-单击复选框，分配给checbkox的值显示在输入框内

$('input.lowercase').on('change', function(){
      if ( $(this).is(':checked') ) {
$("input.qwer").on("keyup",function () {
    $("input.qwer").html($(this).val());
}); } } );

不管我做什么，我都不能让它工作。有什么帮助吗？ 试试看

var $chk = $('input.qwer').on('change', function () {
    //if the checkbox is checked and output is empty set the value
    if (this.checked && !$output.val()) {
        $output.val(this.value)
    }
});
var $output = $("input.output").on("change", function () {
    //when the value of output is changed as empty and checkbox is checked then set the value to checkbox
    if (!this.value && $chk.is(':checked')) {
        this.value = $chk.val();
    }
});

演示：

试试看

var $chk = $('input.qwer').on('change', function () {
    //if the checkbox is checked and output is empty set the value
    if (this.checked && !$output.val()) {
        $output.val(this.value)
    }
});
var $output = $("input.output").on("change", function () {
    //when the value of output is changed as empty and checkbox is checked then set the value to checkbox
    if (!this.value && $chk.is(':checked')) {
        this.value = $chk.val();
    }
});

演示：

试试这个：-

$('input.qwer').on('change', function(){
   if ( $(this).is(':checked') ) {
     $("input.output").val($(this).val());
   } 
   else{ $("input.output").val("123"); }
});

使用上述代码，如果复选框未选中，则具有类“output”的文本框将获得其初始视图，即“123”，如果您不需要此功能，请尝试以下操作：

编辑：-

试试这个：-

$('input.qwer').on('change', function(){
   if ( $(this).is(':checked') ) {
     $("input.output").val($(this).val());
   } 
   else{ $("input.output").val("123"); }
});

使用上述代码，如果复选框未选中，则具有类“output”的文本框将获得其初始视图，即“123”，如果您不需要此功能，请尝试以下操作：

编辑：-

[编辑]根据您的需要 演示 HTML: [编辑]根据您的需要 演示 HTML:

---

快速问题，如果我添加第二个复选框和其他值，并选中它，我如何使这两个值存在于文本输入框中？因为在这个解决方案中，一个复选框值被另一个复选框值替换。谢谢你的帮助！是否要向一个文本框添加两个值？是。基本上是将多个复选框中的多个值添加到一个文本框中。这很尴尬，因为两天前我让它工作了，但不知怎么的，我现在无法重新创建它。好吧，我已经编辑了我的答案和小提琴的链接。让我知道这是否是您想要的。它工作得很好：-有没有办法从取消选中的复选框中删除附加值？快速提问，如果我添加第二个带有其他值的复选框，并选中它，我如何使这两个值存在于文本输入框中？因为在这个解决方案中，一个复选框值被另一个复选框值替换。谢谢你的帮助！是否要向一个文本框添加两个值？是。基本上是将多个复选框中的多个值添加到一个文本框中。这很尴尬，因为两天前我让它工作了，但不知怎么的，我现在无法重新创建它。好吧，我已经编辑了我的答案和小提琴的链接。让我知道这是否是你想要的。它工作得很好：-是否有任何方法可以从取消选中的复选框中删除附加值？

<input type="text" class="output" value="" />
<br>
<input type="checkbox" class="qwer" value="qwerty">Input value of this checkbox(qwert)
<br>
<input type="checkbox" class="numbers" value="1234567890">Input value of this checkbox(numbers)
<br>
<input type="checkbox" class="asdfg" value="asdfg">Input value of this checkbox(asdfg)
<br>
<input type="checkbox" class="zxcvb" value="zxcvb">Input value of this checkbox(zxcvb)

$('input.qwer').on('change', function () {
    if ($(this).is(':checked')) {
        $('.output').val($('.output').val() + $(this).val());
    } else {
        $('.output').val($('.output').val().replace($('.qwer').val(), ''));
    }
});

$('input.numbers').on('change', function () {
    if ($(this).is(':checked')) {
        $('.output').val($('.output').val() + $(this).val());
    } else {
        $('.output').val($('.output').val().replace($('.numbers').val(), ''));
    }
});

$('input.asdfg').on('change', function () {
    if ($(this).is(':checked')) {
        $('.output').val($('.output').val() + $(this).val());
    } else {
        $('.output').val($('.output').val().replace($('.asdfg').val(), ''));
    }
});

$('input.zxcvb').on('change', function () {
    if ($(this).is(':checked')) {
        $('.output').val($('.output').val() + $(this).val());
    } else {
        $('.output').val($('.output').val().replace($('.zxcvb').val(), ''));
    }
});