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.

you have to write a function in javasript to fire check and uncheck events. use the class name of your check box to get its status , and you can add it in an array. make sure your ids are also be dynamic i can see like your id is static so make id dynamic that will help you to get control over each checkbox — Arunprasanth K V, Apr 26 '17 at 07:36

score 2 · Answer 1 · answered Apr 26 '17 at 07:14

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

i want to create function, when i check specific row then its value should go to javascript array without submitting form — Shridhar Salunkhe, Apr 26 '17 at 07:31
USe this code : $('input[name=cbCustomer]').on('change',function(){ if($(this).is(':checked')) { CustomerIDArray.push($(this).val()); } else { CustomerIDArray.splice($.inArray($(this).val(), CustomerIDArray), 1 ); } console.log(CustomerIDArray); }); — Nidhi, Apr 26 '17 at 07:41

Sheikh Kawser · Accepted Answer · 2017-04-26T07:51:18.470

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>

edited Apr 26 '17 at 07:51

answered Apr 26 '17 at 07:34

Sheikh Kawser

116
2
6

this is for adding id and what is for removing when unchecked row – Shridhar Salunkhe Apr 26 '17 at 08:00
@ShridharSalunkhe no need to remove array will be cleared in each checkBoxClass click because of this line var CustomerIDArray=[]; – Arunprasanth K V Apr 26 '17 at 08:34
i hv given alert for push item. when i click on first row then in alert it should give me only first row id right? but it showing all id's in table y? – Shridhar Salunkhe Apr 26 '17 at 09:17
@ArunprasanthKV – Shridhar Salunkhe Apr 26 '17 at 09:37
can we add onclick or onchange event on checkbox in html? – Shridhar Salunkhe Apr 26 '17 at 10:23
Yes. have a look http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event – Sheikh Kawser Apr 26 '17 at 10:26
@ShridharSalunkhe you are not using mvc html controls for checkbox, you are using pure html only, so no need to worry about mvc syntax for that you can just use the normal html syntax. use this syntax if u want to do it in mvc razor @Html.Checkbox( "name", new { @onclick="functionName()"}) – Arunprasanth K V Apr 26 '17 at 10:56
@ShridharSalunkhe anyway you are using the help of class name to get fired the onClick event(in javascript), so no need to do the same again in html. – Arunprasanth K V Apr 26 '17 at 10:57

How to Create array Using checked ID's in MVC

2 Answers2