javascript - How to select all checkboxes without changing var parameters

Question

I using ViewModel and I have table with checkboxes, I can only check one by one boxes, but I need check all option but I need my var values to be defined, because I pass that values to controller and do something.

      $('.checktip').click(function () {
      var idemployee = $('.idemployee').val();
      var idtip= $(this).attr('idtip');
      var chk = $(this).prop('checked');
      $.ajax({
            url: UrlSettingsDocument.Books,
            data: { idemployee: idemployee, idtip: idtip, chk: chk },
            type: "POST",
            success: function (result) {
      if (result.result == "Redirect") {
      window.location = result.url;
     }
     }
     });
    });

My .cshtml

<table class="table table-striped grid-table">
        <tr>
        <th>Samp</th>
        <th>Id of Book</th>
        <th>
         //Button for check all *(NOT IMPLEMENTED)*
         <button type="button" class="checkall">Select/Deselect</button>
        </th>
        </tr>
        @foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
        {
        <tr>
        <td>@item.idtip</td>
        <td>@item.tipname</td>
        <td>
        <div class="pure-checkbox">
        <input type="checkbox" idtip="@item.idtip" class="checktip" checked="@(item.idemployee == ViewBag.idemployee ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
        <label for="@item.id.ToString()"></label>
        </div>
        </td>
        </tr>
        }
    </table>
    <input type="hidden" value="@ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />
</div>

question from:https://stackoverflow.com/questions/65626633/how-to-select-all-checkboxes-without-changing-var-parameters

Answer 1

Use check box to check all checkbox instead of button.

On check change, using the class check/uncheck all checkbox inside the table.

$('#checkall').on('change', function() {
  $('.checktip:checkbox').prop('checked', $(this).is(":checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped grid-table">
  <tr>
    <td><input type="checkbox" id="checkall" />Check All</td>
    <td><input type="checkbox" class="checktip" /></td>
    </td>
    </td>
    </td>
    <td><input type="checkbox" class="checktip" /></td>
    </td>
    </td>
    <td><input type="checkbox" class="checktip" /></td>
    </td>
    <td><input type="checkbox" class="checktip" /></td>
  </tr>
</table>