在复选框选择上更改文本输入值

Question

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

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

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

无论我做什么，我都无法让它发挥作用。有帮助吗？ http://jsfiddle.net/6ycnzrty/

Answer 1

[已编辑]（根据您的需要）

Fiddle

上的演示

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)

的JavaScript：

$('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(), ''));
    }
});

Answer 2

试试这个： -

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

如果取消选中复选框，则使用上面的代码，然后使用类＆＃39;输出＆＃39;如果你不需要这个功能，那就会得到它的初步观点，然后试试这个：

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

编辑： -

DEMO

Answer 3

尝试

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();
    }
});

演示：Fiddle

Answer 4

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

DEMO