Change Text input value on checkbox select

Question

I am trying to input the value of a checkbox into a text input.

Let's say that the input box is empty - you click on the checkbox, and the value assigned to the checbkox is being shown inside the input box.

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

No matter what I do I can't get this to work. Any help? http://jsfiddle.net/6ycnzrty/

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

[EDITED] (As per your needs)

Demo on `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(), ''));
    }
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 6, 2014 at 9:35

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Andy Andy Over a year ago

Quick question, if I add second checkbox with other value, and check it, how can I make those two values exist in the text input box? Because with this solution one checkbox value is being replaced by other one. Appreciate your help!

Weafs.py Over a year ago

Do you want to add two values to one textbox?

Andy Andy Over a year ago

Yes. Basically multiple values from multiple checkboxes added to one textbox. This is embarassing because 2 days ago I had it working and somehow I am unable now to recreate it.

Weafs.py Over a year ago

Okay, I've edited my answer and the link to the fiddle. Let me know if this is what you want.

Andy Andy Over a year ago

It works nicely :-) Is there any way to remove the added value from checkbox on uncheck?

|

Kartikeya Khosla · Accepted Answer · 2014-09-06 09:47:15Z

2

Try This :-

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

With above code if checkbox is unchecked then textbox having class 'output' will get its initial view i.e '123',if you don't need this functionality then try this :

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

EDIT :-

DEMO

edited Sep 6, 2014 at 9:47

answered Sep 6, 2014 at 9:32

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-09-06 09:31:52Z

1

Try

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

Demo: Fiddle

answered Sep 6, 2014 at 9:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

vikrant singh · Accepted Answer · 2014-09-06 09:34:43Z

0

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

DEMO

answered Sep 6, 2014 at 9:34

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

Change Text input value on checkbox select

4 Answers 4

[EDITED] (As per your needs)

Demo on `Fiddle`

HTML:

JavaScript:

13 Comments

Comments

Comments

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

[EDITED] (As per your needs)

Demo on Fiddle

HTML:

JavaScript:

13 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Demo on `Fiddle`