выберите один или несколько или все флажок с jquery (ASP.NET MVC) - PullRequest
Новая
       2

выберите один или несколько или все флажок с jquery (ASP.NET MVC)

0 голосов
/ 12 сентября 2018

В моем проекте ASP.NET MVC есть таблица, в которой есть таблица с флажком.Таблица генерируется из базы данных с для каждого цикла.таблица выглядит примерно так 

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

Здесь у меня есть флажок для каждой строки в таблице, а в заголовке таблицы у меня есть флажок для проверки всех их сразу.

Я могу проверить их все и получить их идентификатор с помощью скрипта примерно так: 

       $('#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', '');
                    });
                }
            }

Я получаю вывод в виде отдельной запятой строки в 

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

Теперь моя проблема заключается в том, что хотя я могу проверить все из них одновременно, я не могу проверить один или несколько (но не все) и получить их соответствующие идентификаторы в качестве выходных данных в моем поле вывода в виде значения, разделенного запятыми.Как мне решить это ??пожалуйста, помогите.

1 Ответ

0 голосов
/ 13 сентября 2018

Решением было добавить идентификатор для ввода флажка id="@item.CustomerID", а затем перебрать все флажки, чтобы увидеть, какие флажки отмечены. 

//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"/>
...