使用jQuery选择一个或多个或所有复选框（ASP.NET MVC）

Question

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.

Answer 1

The solution was to add an ID to the checkbox input id="@item.CustomerID" and then loop through all the checkbox to see which checkboxes are checked.

//in loop
<td class="col-md-2" align="right">
      <div class="btn-group pull-left">
          <input id="@item.CustomerID" name="getCustomerID" class="customerCheck" type="checkbox" value="@item.CustomerID" autocomplete="off" />
      </div>
</td>

//click on checkbox (any)
$('.customerCheck').click(function () {
      //see all the checked checkboxs and loop through them
      $('input[type=checkbox]:checked').each(function () {
            //get their id and make it a comma separated string
            var sSheckID = $('input[type=checkbox]:checked').map(function () {
            return $(this).attr('id');
        }).get().join();
        //set is as the value of the output box.
        $("#CustomerID").val(sSheckID);
        $("#CustomerID").attr('value', sSheckID);
    });
});

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