How to Create array Using checked ID's in MVC

Question

    <script type="text/javascript">
            $(function () {
                    var CustomerIDArray=[];
                    $('#tblEmailScheduler').find('input[type="checkbox"]:checked').each(function (i,item) {
//how to Add checked id's in array??

                    });
                });
            });
        </script>

 <table id="tblEmailScheduler"  class="table-bordered col-offset-12">
                <thead>
                    <tr class="label-primary">
                        <th style="padding:5px 15px;">
                            First Name
                        </th>
                        <th style="padding:5px 15px;">
                            Last Name
                        </th>
                        <th style="padding:5px 15px;">
                            Email ID
                        </th>
                        <th style="padding:5px 15px;">
                            Customer Type
                        </th>
                        <th style="padding:5px 15px;">
                            Customer Designation
                            @Html.DropDownList("CustomerDesignation", new SelectList(ViewBag.SelectAllCustomerDesignationDDL, "Value", "Text"), new { id = "CustomerDesignationDDL" , name = "CustomerDesignationDDL" })
                        </th>
                        <th style="padding:5px 15px;">
                            Select All
                            <div class="checkbox control-group">
                                <label>
                                    <input type="checkbox" id="cbSelectAll" />
                                </label>
                            </div>
                        </th>

                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th colspan="2">
                            EmailTemplate :
                            @Html.DropDownList("EmailSubject", new SelectList(ViewBag.SelectAllEmailTemplateDDL, "Value", "Text"), new { id = "SelectAllEmailTemplateDDL" })
                        </th>
                        <th colspan="2">
                            Set Date And Time:
                            <input type="text" class = "from-date-picker" readonly = "readonly"  />
                        </th>
                        <th colspan="2">
                           <input type="submit" value="Schedule" id="btnSubmit" class="btn btn-default" />
                        </th>
                        <td>

                        </td>
                    </tr>
                </tfoot>
                @foreach (var item in Model)
                {
                    <tr style="text-align:center">
                        <td id="tblFirstName">
                            @item.FirstName
                        </td>
                        <td id="tblLastName">
                            @item.LastName
                        </td>
                        <td id="tblEmailID">
                            @item.EmailID
                        </td>
                        <td id="tblCustomerType">
                            @item.CustomerType
                        </td>
                        <td id="tblCustomerDesignation">
                            @item.CustomerDesignation
                        </td>
                        <td>
                            <div class="checkbox control-group">
                                <label>
                                    <input type="checkbox" id="cbCustomer" value="@item.CustomerID" class="checkBoxClass"/>
                                </label>
                            </div>
                        </td>
                    </tr>
                }

          </table>

This is my code. in this Foreach generated checkbox for each row. I want to create array in java script. When I check specific row then that row CustomerID should add in function and when i unchecked specific row then it should removed from array.

Answer 1

In your code, all of your checkbox's have the same id. You have to change your code and give unique id for all of your checkbox's. Finally add those ids in the array.

@foreach (var item in Model)
    {
        <tr style="text-align:center">

            <td>
                <div class="checkbox control-group">
                    <label>
                        <!-- SEE id property here, I've made it dynamic -->
                        <input type="checkbox" id="cbCustomer_@item.CustomerID" value="@item.CustomerID" class="checkBoxClass"/>
                    </label>
                </div>
            </td>
        </tr>
    }

<script>
        $(function () {
            $('#btnSubmit').submit(function () {
                var CustomerIDArray=[]; 
            $('#tblEmailScheduler').find('input[type="checkbox"]').each(function (i,item) {
                    // just push the item in array, if it checked
                    if($(item).prop('checked'))
                        CustomerIDArray.push(item.Id); 
                });
            });
        });
 </script>

As you have edited your question, now the following code will work fine...

 <script>
            $(function () {
                $(".checkBoxClass").click(function (e) {
                var CustomerIDArray=[]; 
                $('#tblEmailScheduler').find('input[type="checkbox"]').each(function (i,item) {
                        // just push the item in array, if it checked
                        if($(item).prop('checked'))
                            CustomerIDArray.push(item.Id); 
                    });
                });
            });
     </script>

Answer 2

Have you tried this?

<form id="formEmail" action="#" method="post">
            <table id="tblEmailScheduler">
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" id="cbSelectAll" name="cbSelectAll" value="1"/>
                        </label>
                    </td>
                    <td>
                        <label>
                            <input type="checkbox" value="2" name="cbCustomer"/>
                            <input type="checkbox" value="3" name="cbCustomer"/>
                            <input type="checkbox" value="5" name="cbCustomer"/>
                            <input type="checkbox" value="9" name="cbCustomer"/>
                        </label>
                    </td>
                </tr>
            </table>
            <button type="submit" name="button">submit</button>
        </form>

code for jquery

$('#formEmail').submit(function(){
             var CustomerIDArray = [];
            $('#tblEmailScheduler input[name=cbCustomer]').each(function(){
                if($(this).is(':checked')) {
                    CustomerIDArray.push($(this).val());
                }
            });
            console.log(CustomerIDArray);
            return false;//remove this line while you submit form and add action in form tag
         });
         $('#cbSelectAll').click(function(){

             if($(this).is(':checked') == true) {
                $('input[name=cbCustomer]').prop('checked','true');
             } else {
                 $('input[name=cbCustomer]').removeAttr('checked');
             }

         });

you just have to assign name to checkboxces insted of id