How to insert the chosen values of checkboxes in to an input?

Question

I have multiple checkboxes and if I select 1, 2 or 3 checkboxes then their values should be inserted in to another input. Also when we uncheck the value it should be removed from the input.

I am new to Javascript. Please help me out.

<div>
  <label>Your Professional /Educational details *</label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="CA/CS">
    CA/CS
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Accounting">
    Accounting
  </label><br>
  <label class="checkbox-inline"> 
    <input type="checkbox" name="professional" value="Graduate">
    Graduate
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Masters">
    Masters
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Intermediate with sufficient Excel knowledge">
    Intermediate with sufficient Excel knowledge
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="I have no computer knowledge">
    I have no computer knowledge
  </label>
</div>

<input type="text" name="details" id="details">

On `change` of the checkboxes, use [this](https://stackoverflow.com/a/19766067/519413) to build an array of their values, then `join()` that together and set it as the `val()` of the textbox. If you want more specific help than that, please edit the question to show what you've tried — Rory McCrossan, Sep 12 '18 at 08:25
Welcome to the community @Satya, Can you please provide additional information on what you are planning to do with the checked boxes (extra code on a pen if you can) so that we can work and give a working solution — , Sep 12 '18 at 08:26

score 1 · Accepted Answer · answered Sep 12 '18 at 08:35

Use an onchange listener to build a string of what is checked, then set that to #details.

function toggleInput() {
  let checkboxes = document.querySelectorAll("input[type='checkbox']");
  let checkedValues = [].reduce.call(checkboxes, (acc, n) => {
    if (n.checked) acc.push(n.value);
    return acc;
  }, [])
  document.querySelector("#details").value = checkedValues.join(", ");
}

<div onchange="toggleInput()">
  <label>Your Professional /Educational details *</label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="CA/CS">
    CA/CS
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Accounting">
    Accounting
  </label><br>
  <label class="checkbox-inline"> 
    <input type="checkbox" name="professional" value="Graduate">
    Graduate
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Masters">
    Masters
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Intermediate with sufficient Excel knowledge">
    Intermediate with sufficient Excel knowledge
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="I have no computer knowledge">
    I have no computer knowledge
  </label>
</div>

<input type="text" name="details" id="details">

score 1 · Answer 2 · answered Sep 12 '18 at 08:38

I think the below code is exactly what you wanted.

$('.checkboxClass').change(function() {
  if (this.checked) {
      if($('#details').val() == "")
        $('#details').val(this.value)
      else
      $('#details').val($('#details').val()+","+this.value) 
  } else {
      $('#details').val("") 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div>
                  <label>Your Professional /Educational details *</label> 
                 <br>

                 <label class="checkbox-inline"><input type="checkbox" class="checkboxClass" name="professional" value="CA/CS">CA/CS</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Accounting">Accounting</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Graduate">Graduate</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Masters">Masters</label><br>
                  <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Intermediate with sufficient Excel knowledge">Intermediate with sufficient Excel knowledge</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" value="I have no computer knowledge">I have no computer knowledge</label>
                </div>

<input type="text" name="details" id="details" >

PEN LINK TO TRY THE SAME EXAMPLE

Sagar Shinde · Answer 3 · 2018-09-12T13:54:14.320

You can do this by like below.

 $(document).ready(function(){
   $('input[type="checkbox"]').click(function(){
   var getVal=$(this).val();
   var total_Val=$('#details').val()==''?getVal:$('#details').val()+','+getVal;
        if($(this).prop("checked") == true && (getVal=='CA/CS' || getVal=='Accounting' || getVal=='Graduate')){
          $('#details').val(total_Val);
        }
        else if($(this).prop("checked") == false){
            $('#details').val('');
        }
    });
});

How to insert the chosen values of checkboxes in to an input?

3 Answers3