mercredi 12 septembre 2018

select one or multiple or all checkbox with jquery (ASP.NET MVC)

I have a table in my ASP.NET MVC project with has a table with checkbox. The table is generated from the database with a for each loop. the table looks something like this

<table id="customertable">    
 <thead>
  <tr>
     <th>Customer Name</th>
     <th>Date of Birth</th>
     <th>Age</th>
     <th>
        <div class="btn-group pull-left">
             <input id="checkAll" type="checkbox" autocomplete="off"/>
        </div>
     </th>
    </tr>
 </thead>
 <tbody>
   @foreach (var item in ViewBag.Customer)
   {
     <tr>
       <td id="@item.CustomerID">@item.CustomerName</td>
       <td>@item.DateOfBirth</td>
       <td>@item.Age</td>
       <td class="col-md-2" align="right">
         <div class="btn-group pull-left">
           <input class="customerCheck" type="checkbox" autocomplete="off"/>
         </div>
       </td>
      </tr>
     }
 </tbody>
</table>

Here I have a checkbox for each of the row in table and in the table head i have the checkbox for checking all of them at once.

I can check all of them and get their id with a script something like this

       $('#customerTable #checkAll').click(
            function () {
                //save state of checkall checkbox
                var chk = $('#checkAll').is(':checked');
                //check state of checkall checkbox
                if (chk !== false) {

                    //change all other checkbox to this state
                    $('.customerCheck').prop('checked', true);

                    //loop through all checked customer
                    $('.customerCheck').each(function () {

                        //get value of first html element
                        var seeID = $('#customertable tr td').map(function () {
                            //get the customerID and create a comma separated string
                            var cellText = $(this).attr('id');
                            return cellText;
                        }).get().join();
                        $("#customerID").val(seeID);
                        $("#CustomerID").attr('value', seeID);

                    });


                } else {
                    //remove all checked checkbox
                    $('.customerCheck').prop('checked', false);
                    $('.customerCheck').each(function () {
                        $('#customertable tr td').each(function () {
                            $(this).attr('value', '');
                        });
                        $("#customerID").attr('value', '');
                    });
                }
            }

I am getting the output as a comma separate string in

<input class="form-control" id="customerID" name="customerID" type="text" value="" />

Now, my problem is though I can check all of then at one, i cannot check one or multiple (but not all) and get their respective ids as output on my output field as comma separated value. How do i solve this?? please help.




Aucun commentaire:

Enregistrer un commentaire