Change input with string of multiple checkbox values












0














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>












share|improve this question




















  • 1




    Possible duplicate of add event listener on elements created dynamically
    – zfrisch
    Nov 20 at 23:15
















0














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>












share|improve this question




















  • 1




    Possible duplicate of add event listener on elements created dynamically
    – zfrisch
    Nov 20 at 23:15














0












0








0







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>












share|improve this 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>








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>





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>






javascript jquery checkbox input onclick






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 at 23:12









azro

10.4k41438




10.4k41438










asked Nov 20 at 23:09









David Bean

31




31








  • 1




    Possible duplicate of add event listener on elements created dynamically
    – zfrisch
    Nov 20 at 23:15














  • 1




    Possible duplicate of add event listener on elements created dynamically
    – zfrisch
    Nov 20 at 23:15








1




1




Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15




Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15












4 Answers
4






active

oldest

votes


















0














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>








share|improve this answer





















  • 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 at 15:45



















0

















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








share|improve this answer





























    -1














    you can try this:



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





    share|improve this answer





























      -1














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





      share|improve this answer























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402986%2fchange-input-with-string-of-multiple-checkbox-values%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        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>








        share|improve this answer





















        • 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 at 15:45
















        0














        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>








        share|improve this answer





















        • 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 at 15:45














        0












        0








        0






        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>








        share|improve this answer












        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>








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





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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 at 4:04









        Sooriya Dasanayake

        8551410




        8551410












        • 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 at 15:45


















        • 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 at 15:45
















        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 at 15:45




        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 at 15:45













        0

















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








        share|improve this answer


























          0

















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








          share|improve this answer
























            0












            0








            0









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








            share|improve this answer















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








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





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






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 20 at 23:21









            Taplar

            15.3k21529




            15.3k21529























                -1














                you can try this:



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





                share|improve this answer


























                  -1














                  you can try this:



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





                  share|improve this answer
























                    -1












                    -1








                    -1






                    you can try this:



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





                    share|improve this answer












                    you can try this:



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






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 20 at 23:19









                    Poonam Hirpara

                    3115




                    3115























                        -1














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





                        share|improve this answer




























                          -1














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





                          share|improve this answer


























                            -1












                            -1








                            -1






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





                            share|improve this answer














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






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 21 at 0:06

























                            answered Nov 20 at 23:25









                            Denis Kovzelyuk

                            696




                            696






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402986%2fchange-input-with-string-of-multiple-checkbox-values%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                404 Error Contact Form 7 ajax form submitting

                                How to know if a Active Directory user can login interactively

                                TypeError: fit_transform() missing 1 required positional argument: 'X'