如何创建数组在MVC中使用选中的ID

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> 

这是我的代码。在这个Foreach中为每一行生成复选框。我在 想要在java脚本中创建数组。当我检查特定的行然后 该行CustomerID应添加功能，当我取消选中 特定的行然后它应该从数组中删除。

Answer 1

在你的代码中，所有的复选框的具有相同的ID。您必须更改您的代码并为您的所有复选框提供唯一的ID。最后在数组中添加这些ID。

@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> 

当你编辑你的问题，现在下面的代码将正常工作......

<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

你试过吗？ 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'); 
      } 

     }); 

，你只需要指定名称checkboxces

<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> 

代码insted的ID