如何在選中的表格中設置復選框？

Question

我有一個表，我有我想設置為選中的復選框的id ，但我不能這樣做，我不知道為什么。

我嘗試這樣做，但沒有任何反應，而且我沒有任何錯誤消息：

 $('#medicalListTable input.type_checkbox[id="sindicate-345"]').prop('checked', true); $('input.type_checkbox[id="sindicate-345"]').prop('checked', true); $('input.type_checkbox[id="sindicate-345"]').attr('checked', true);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;"> <thead> <tr role="row"> <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;"> <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;"> <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;"> <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;"> <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="vehicleId sorting_1">345</td> <td class="model">NAME</td> <td class="model">SURNAME</td> <td> <input type="checkbox" id="sindicate-345"> </td> </tr> </tbody> </table>

Answer 1

元素上沒有type_checkbox類。 我認為您打算使用這樣的屬性選擇器：

$('#medicalListTable input[type="checkbox"][id="sindicate-345"]').prop('checked', true);

但是，如果元素上有一個id ，它在 DOM 中應該是唯一的，因此這是您需要使用的唯一選擇器：

$('#sindicate-345').prop('checked', true);

 $('#sindicate-345').prop('checked', true);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;"> <thead> <tr role="row"> <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;"> <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;"> <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;"> <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;"> <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="vehicleId sorting_1">345</td> <td class="model">NAME</td> <td class="model">SURNAME</td> <td> <input type="checkbox" id="sindicate-345"> </td> </tr> </tbody> </table>

Answer 2

由於屬性id在文檔中是唯一的，您可以簡單地使用它：

 $('#sindicate-345').attr('checked', true);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;"> <thead> <tr role="row"> <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;"> <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;"> <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;"> <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;"> <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="vehicleId sorting_1">345</td> <td class="model">NAME</td> <td class="model">SURNAME</td> <td> <input type="checkbox" id="sindicate-345"> </td> </tr> </tbody> </table>

Answer 3

你可以通過

$('#sindicate-345').attr('Checked','Checked');

 $('#sindicate-345').attr('Checked','Checked');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;"> <thead> <tr role="row"> <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;"> <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;"> <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;"> <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;"> <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="vehicleId sorting_1">345</td> <td class="model">NAME</td> <td class="model">SURNAME</td> <td> <input type="checkbox" id="sindicate-345"> </td> </tr> </tbody> </table>

或者

$("#sindicate-345").prop("checked", true);

 $("#sindicate-345").prop("checked", true);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;"> <thead> <tr role="row"> <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;"> <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;"> <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;"> <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;"> <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-ns"></span></div> </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="vehicleId sorting_1">345</td> <td class="model">NAME</td> <td class="model">SURNAME</td> <td> <input type="checkbox" id="sindicate-345"> </td> </tr> </tbody> </table>