Change input with string of multiple checkbox values

Question

I need to be able to set the onclick function without onclick being in the input tag. The below code works great, but the input tags are generated and I cannot add the onclick event to them. Jquery solution is fine too.

function setValue(){
   var val="";
   var frm = document.getElementById("form1");
   var cbs = document.getElementById("form1")['amenities[]'];
   for(var n=0;n<cbs.length;n++){
       if(cbs[n].checked){
           val+=cbs[n].value+",";
       }
   }
   var temp = val.split(",");
   temp.pop();
   frm.textname.value=temp
}

    
    <form id="form1">
    <input type="checkbox" name="amenities[]" value="coffee" onclick="setValue(this.value);">
    <input type="checkbox" name="amenities[]" value="tea" onclick="setValue(this.value);">
    <input type="checkbox" name="amenities[]" value="beer" onclick="setValue(this.value);">
    <input type="checkbox" name="amenities[]" value="soda" onclick="setValue(this.value);">
    <input type="checkbox" name="amenities[]" value="orangejuice" onclick="setValue(this.value);">
    <input type="text" name="textname">
    </form>

Possible duplicate of [add event listener on elements created dynamically](https://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically) — zfrisch, Nov 20 '18 at 23:15

score 0 · Answer 1 · answered Nov 20 '18 at 23:21

            //attach a change handler to the form.
            //the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
  //set the value of the textname
  $form.find('[name="textname"]').val(
    //get all the checked checkbox and map all their values to an array
    $form.find(':checkbox:checked').map(function(){
      //return the value for each checked element
      return this.value;
    }).get() //use get() to get a basic array, not a jQuery object
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <input type="checkbox" name="amenities[]" value="coffee">
  <input type="checkbox" name="amenities[]" value="tea">
  <input type="checkbox" name="amenities[]" value="beer">
  <input type="checkbox" name="amenities[]" value="soda">
  <input type="checkbox" name="amenities[]" value="orangejuice">
  <input type="text" name="textname">
</form>

score 0 · Accepted Answer · answered Nov 21 '18 at 04:04

Use the .map() function

$(".checkbox").change(function() {
   $("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
    <input type="checkbox" class="checkbox" name="amenities[]" value="coffee" >
    <input type="checkbox" class="checkbox" name="amenities[]" value="tea" >
    <input type="checkbox" class="checkbox" name="amenities[]" value="beer" >
    <input type="checkbox" class="checkbox" name="amenities[]" value="soda">
    <input type="checkbox" class="checkbox" name="amenities[]" value="orangejuice" >
    <input type="text" name="textname" id= "text">
 </form>

Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track. — David Bean, Nov 26 '18 at 15:45

score -1 · Answer 3 · answered Nov 20 '18 at 23:19

-1

you can try this:

$('input[type=checkbox]').change(function() {
    //logic goes here
});

answered Nov 20 '18 at 23:19

ph1409

113
1
7

Denis Kovzelyuk · Answer 4 · 2018-11-21T00:06:37.957

Plain JS:

    var mForm = document.getElementById("form1");
    mForm.addEventListener("click", function(event){
        console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
    });

UPDATED:

var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities[]'];

function setValue(frm, cbs){
   var output = [];

   for( var n in cbs){
        if(cbs[n].checked){
            output.push(cbs[n].value);
        }
   }

   frm.textname.value=output.join();
}

frm.addEventListener("click", function(event){
    if (event.toElement.type == "checkbox") {
        setValue(frm, cbs);
    }
});

Change input with string of multiple checkbox values

4 Answers4