[英]How to set checkbox in a table checked?
I have a table I have the id
of the checkbox that I want to set as checked, but I cannot do it and I don't know why.我有一个表,我有我想设置为选中的复选框的
id
,但我不能这样做,我不知道为什么。
I try with this, but nothing happens and I don't have any kind of error message:我尝试这样做,但没有任何反应,而且我没有任何错误消息:
$('#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>
There is no type_checkbox
class on the element.元素上没有
type_checkbox
类。 I presume you meant to use an attribute selector like this instead:我认为您打算使用这样的属性选择器:
$('#medicalListTable input[type="checkbox"][id="sindicate-345"]').prop('checked', true);
However , if you have an id
on the element it should be unique in the DOM so that is the only selector you need to use:但是,如果元素上有一个
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>
As the attribute id is unique in a document you can simply use that:由于属性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>
You can achieve by你可以通过
$('#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>
or或者
$("#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.