1

Inside a form, I've a hidden field: 

<input type="hidden" name="checkedData" id ="checkedData" />

Now, Inside on the page, I've a model which is fetching records in a data table . Say, I've selected 3 rows out of 5.

Now, I want to store these 3 ids into a variable and assign it to the above hidden field so as to fetch it on the controller. Please correct me where I'm wrong. 

var data;

$.each($("input[name='checkbox']:checked"),             
         function () { 
alert(this.value);  // will print the id of all the selected checkboxes.
//I want the ids of all 3 checkboxes here in one variable seperated by comma. 
//Something like this : 
//data = 1,2,3;  [not getting how to store "this.id" dynamically into one variable]

});

And then, 

document.getElementById("checkedData").value = data;

And instead of var data, if I take an array, then, how to assign that array's value into the above hidden field. How to achieve this? Kindly suggest.

ananya
  • 23
  • 7
  • Does this answer your question? [Using jquery to get all checked checkboxes with a certain class name](https://stackoverflow.com/questions/5450104/using-jquery-to-get-all-checked-checkboxes-with-a-certain-class-name) – Rush.2707 May 13 '20 at 07:29

2 Answers2

0

There might be plenty of ways to do that, but the first thing coming in my mind is to make comma-separated string and pass it to controller, and split the string from comma. 

$(document).ready(function(){

  var tmp = [];
  $(".chk").on("change", function() {
    tmp = [];
    $(".chk").each(function() {
        if($(this).prop("checked") == true)
        {
          tmp.push($(this).attr("id"));
        }
    });
    $("#hdncheckbox").val(JSON.stringify(tmp));
    $("#result").text($("#hdncheckbox").val());
    console.log($("#hdncheckbox").val())
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='hidden' id='hdncheckbox' />

<div>
<input class='chk' type='checkbox' id='chk1' />
<input class='chk' type='checkbox' id='chk2' />
<input class='chk' type='checkbox' id='chk3' />
<input class='chk' type='checkbox' id='chk4' />
</div>

<p id="result"></p>

Pass the hiddenfield value to controller and then split that variable with comma into it.

Rush.2707
  • 685
  • 10
  • 29
0
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script type="text/javascript">

            $(document).ready(function(){
                var data = "";
                $('input[name="cricket"]').on('change', function() {

                  $('input[name="cricket"]').not(this).prop('checked', false);
                    console.log(this.value);
                    if (data == "") {
                        data = this.id;
                    }else{
                        data = data+", "+this.id;
                    }
                    console.log(data);
                    document.getElementById("checkedData").value = data;
                });
            });
        </script>
    </head>
    <body>
     <input type="hidden" name="checkedData" id ="checkedData" />

    <input type="checkbox" name="cricket" id="1" value="Virat Kohli" class="mycheck"> Virat Kohli
    <input type="checkbox" name="cricket" id="2" value="Chris Gayle" class="mycheck"> Chris Gayle
    <input type="checkbox" name="cricket" id="3" value="Mahendra Singh Dhoni" class="mycheck"> Mahendra Singh Dhoni
    <input type="checkbox" name="cricket" id="4" value="Sachin Tendulkar" class="mycheck"> Sachin Tendulkar
    <input type="checkbox" name="cricket" id="5" value="Donald Bradman" class="mycheck"> Donald Bradman
  </body>
  </html>
Hritu Rathod
  • 109
  • 5