title: select one or multiple or all checkbox with jquery (ASP.NET MVC)
body: <p>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 </p>
  
  <pre><code>&lt;table id="customertable"&gt;    
   &lt;thead&gt;
    &lt;tr&gt;
       &lt;th&gt;Customer Name&lt;/th&gt;
       &lt;th&gt;Date of Birth&lt;/th&gt;
       &lt;th&gt;Age&lt;/th&gt;
       &lt;th&gt;
          &lt;div class="btn-group pull-left"&gt;
               &lt;input id="checkAll" type="checkbox" autocomplete="off"/&gt;
          &lt;/div&gt;
       &lt;/th&gt;
      &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
     @foreach (var item in ViewBag.Customer)
     {
       &lt;tr&gt;
         &lt;td id="@item.CustomerID"&gt;@item.CustomerName&lt;/td&gt;
         &lt;td&gt;@item.DateOfBirth&lt;/td&gt;
         &lt;td&gt;@item.Age&lt;/td&gt;
         &lt;td class="col-md-2" align="right"&gt;
           &lt;div class="btn-group pull-left"&gt;
             &lt;input class="customerCheck" type="checkbox" autocomplete="off"/&gt;
           &lt;/div&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
       }
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>I can check all of them and get their id with a script something like this</p>
  
  <pre><code>       $('#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', '');
                      });
                  }
              }
  </code></pre>
  
  <p>I am getting the output as a comma separate string in </p>
  
  <pre><code>&lt;input class="form-control" id="customerID" name="customerID" type="text" value="" /&gt;
  </code></pre>
  
  <p>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.</p>