Изменить ввод со строкой из нескольких значений флажка

Question

Мне нужно иметь возможность установить функцию onclick без присутствия onclick во входном теге.Приведенный ниже код прекрасно работает, но теги ввода генерируются, и я не могу добавить к ним событие onclick.Решение Jquery тоже подойдет.

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>

Answer 1

Используйте функцию .map()

$(".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>

Answer 2

            //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>

Answer 3

Обычный 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
    });

ОБНОВЛЕНО:

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

Answer 4

Вы можете попробовать это:

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