How to select all and cancel in table?

Question

I used this page to create this code https://getbootstrap.com/docs/5.0/forms/checks-radios/#indeterminate

When I click the checkbox with id=(flexCheckIndeterminate), all the checkboxes below it will be selected, and click it again, all the checkboxes below it will be canceled.

How to do it via JS without using jQuery?

 <!doctype HTML>
 <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
       rel="stylesheet" integrity="sha384- 
       EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Bootstrap Table Checkbox Select All and Cancel</h2>
    <div class="container">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" 
                      id="flexCheckIndeterminate">
                    <label class="form-check-label" for="flexCheckIndeterminate">                      
                    </label>
                  </div>
                </th>
                <th>#</th>
                <th >Name</th>
                <th > ID</th>
                <th >Date & Time</th>
                <th >Check-in</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                  <label class="form-check-label" for="defaultCheck1">                                                    
                  </label>
                </div>
                </td>
                <td>1</td>
                <td>Safaa</td>
                <td>20421</td>
                <td>12/2/2021 16:40</td>
                <td>Yes</td>
              </tr>

            <tr>
                <td><div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                  <label class="form-check-label" for="defaultCheck2">                                                    
                  </label>
                </div>
                </td>
                <td>2</td>
                <td>Noor</td>
                <td>19091</td>
                <td>15/2/2021 16:40</td>
                <td>No</td>
                 </td>

            </tr>
        </tbody>
     </table>
    </div>
  

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
      crossorigin="anonymous"></script>

    

   

  </body>
 </html>

score 0 · Answer 1 · answered Nov 02 '21 at 23:24

I'm curious, why did you even mention JQuery? Bootstrap 5 don't use it anymore.

Well, I imagine this is what you want:

// get the global checkbox
 const checkbox = document.getElementById("flexCheckIndeterminate");

 // listen to changes
 checkbox.addEventListener('input', evt => {
  // get event value
  const checked = evt.target.checked;

  // get all other checkboxes
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');

  // update them with the value of the global checkbox
  checkboxes.forEach(checkbox => {
    checkbox.checked = checked;
  });
 });

score 0 · Answer 2 · answered Nov 02 '21 at 23:29

Here is an example:

document.getElementById('flexCheckIndeterminate').addEventListener('click', e => {
  document.querySelectorAll('.form-check-input').forEach(checkbox => {
    checkbox.checked = e.target.checked
  })
})

<!doctype HTML>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
       EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h2>Bootstrap Table Checkbox Select All and Cancel</h2>
  <div class="container">
    <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
      <thead>
        <tr>
          <th>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
              <label class="form-check-label" for="flexCheckIndeterminate">                      
                    </label>
            </div>
          </th>
          <th>#</th>
          <th>Name</th>
          <th> ID</th>
          <th>Date & Time</th>
          <th>Check-in</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
              <label class="form-check-label" for="defaultCheck1">                                                    
                  </label>
            </div>
          </td>
          <td>1</td>
          <td>Safaa</td>
          <td>20421</td>
          <td>12/2/2021 16:40</td>
          <td>Yes</td>
        </tr>

        <tr>
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
              <label class="form-check-label" for="defaultCheck2">                                                    
                  </label>
            </div>
          </td>
          <td>2</td>
          <td>Noor</td>
          <td>19091</td>
          <td>15/2/2021 16:40</td>
          <td>No</td>
          </td>

        </tr>
      </tbody>
    </table>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>

</html>

score 0 · Accepted Answer · answered Nov 03 '21 at 07:20

I got your point what you are facing problem related to indeterminate in pure JavaScript, If indeterminate selected then you want All checked or unchecked then need to first set indeterminate = false then assign what you want checked/unchecked.

I hope you will more learn with my below snippet code.

Source: https://css-tricks.com/indeterminate-checkboxes/

var parentCheckbox = document.getElementById('flexCheckIndeterminate');
parentCheckbox.addEventListener('change', e => {
    document.querySelectorAll('.form-check-input').forEach(checkbox => {
        checkbox.checked = e.target.checked
    })
});
    
document.querySelectorAll('tbody .form-check-input').forEach(checkbox => {
    checkbox.addEventListener('change', ()=> {
        var tbodyCheckbox = document.querySelectorAll('tbody .form-check-input').length;
        var tbodyCheckedbox = document.querySelectorAll('tbody .form-check-input:checked').length;
        if(tbodyCheckbox == tbodyCheckedbox){
            //console.log('All selected')
            parentCheckbox.indeterminate = false;
            parentCheckbox.checked = true;
        }
        if (tbodyCheckbox > tbodyCheckedbox && tbodyCheckedbox>=1) {
            // console.log('Some selected')
            parentCheckbox.indeterminate = true;
        }
        if(tbodyCheckedbox==0) {
            // console.log('No any selected')
            parentCheckbox.indeterminate = false;
            parentCheckbox.checked = false;
        }

    })
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
       EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-12 py-2">
            <h4>Bootstrap Table Checkbox (Unchecked/Indeterminate/Checked)</h4>
        </div>
        <div class="col-sm-12">
            <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                                <label class="form-check-label" for="flexCheckIndeterminate">
                                </label>
                            </div>
                        </th>
                        <th>#</th>
                        <th>Name</th>
                        <th>ID</th>
                        <th>Date & Time</th>
                        <th>Check-in</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                <label class="form-check-label" for="defaultCheck1">
                                </label>
                            </div>
                        </td>
                        <td>1</td>
                        <td>Raeesh</td>
                        <td>20421</td>
                        <td>03/11/2021 12:10</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                                <label class="form-check-label" for="defaultCheck2">
                                </label>
                            </div>
                        </td>
                        <td>2</td>
                        <td>Alam</td>
                        <td>19091</td>
                        <td>02/11/2021 11:30</td>
                        <td>No</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

How to select all and cancel in table?

3 Answers3