Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to set checkbox in a table checked?

Tags:

javascript

html

jquery

checkbox

html-table

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.

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-n-s"></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-n-s"></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-n-s"></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>
like image 923
Imrik Avatar asked Feb 24 '20 13:02

Imrik

People also ask

How do I show a checkbox as checked?

First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.

How do I keep a checkbox checked in HTML?

The checked attribute is a boolean attribute. When present, it specifies that an <input> element should be pre-selected (checked) when the page loads. The checked attribute can be used with <input type="checkbox"> and <input type="radio"> . The checked attribute can also be set after the page load, with a JavaScript.

How to show all checkboxes on table body are checked?

I will also put a checkbox on the table header and selecting this checkbox all rows on the table will be selected. If user selects manually all checkboxes for rows on the table then the checkbox in table header will be checked automatically to show that all checkboxes on the table body are checked.

How do you use checkbox in HTML?

HTML &lt;input type="checkbox"&gt; 1 Definition and Usage. The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. 2 Browser Support 3 Syntax

How to add styles checkbox in Bootstrap table?

The Bootstrap styles checkbox are placed on the table header and on each table row with their own onChange event handlers. Table rows are iterated by using the Javascript map () function.

How to uncheck individual all checkbox table rows in angular?

If any of the checkboxes on the table body gets unchecked the header checkbox will be unchecked automatically. Execute the command ng new angular-check-uncheck-individual-all-checkbox-table-rows in CLI tool to create a new angular project. I will map JSON object from the server into client side object.

2 Answers

There is no type_checkbox class on the element. 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:

$('#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-n-s"></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-n-s"></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-n-s"></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>
like image 185
Rory McCrossan Avatar answered Oct 22 '22 10:10

Rory McCrossan

As the attribute id is unique in a document you can simply use that:

$('#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-n-s"></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-n-s"></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-n-s"></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>
like image 1
Mamun Avatar answered Oct 22 '22 10:10

Mamun
Sign in to Comment

Related questions

Lighthouse audit: Script evaluation vs Script Parsing
How to define private methods in a JS Class
Reading request headers inside a service worker
How to get an specific field data from cloud fire store database?
How to make a DIV expand up instead of down?
Best option for continuously refreshing an HTML table (SPA)
How to change the src attribute of <img> in .vue files with webpack and vue-loader?
Same regex have different results in Java and JavaScript [duplicate]
Using parser combinator to parse simple math expression
How to activate Material Design JS?
Dynamic selection of product variants, comparing 2 arrays
Importing class by class or the whole module, which one is the best?
Sort one array the same way as another array JavaScript
How to dynamically add a column to Bootstrap Vue Table
uuid for v-for key with vue-uuid?
How to run esnext file from terminal
Default Props in stateful (using hooks) functional components
useEffect not working when dependency value changed
Is it possible to POST a responseType: 'stream' in Axios?
Is there any way to disable hapticFeedback in react-native-webview

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!