J'ai besoin de pouvoir définir la fonction onclick sans que l'onclick soit dans la balise d'entrée. Le code ci-dessous fonctionne très bien, mais les balises d'entrée sont générées et je ne peux pas leur ajouter l'événement onclick. La solution Jquery est très bien aussi.

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>
0
David Bean 21 nov. 2018 à 02:09

4 réponses

Meilleure réponse

Utilisez la fonction .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>
0
Sooriya Dasanayake 21 nov. 2018 à 04:04

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

MIS À JOUR:

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);
    }
});
-1
Denis Kovzelyuk 21 nov. 2018 à 00:06
            //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>
0
Taplar 20 nov. 2018 à 23:21

Vous pouvez essayer ceci:

$('input[type=checkbox]').change(function() {
    //logic goes here
});
-1
ph1409 20 nov. 2018 à 23:19