Skip to main content

Simple check-all button for checkboxes using javascript-html.


Implementing Select all button using java-script in simpler way.



<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Username</th>
            <th>Select All <input type="checkbox" id="select-all"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>User1</td>                                             
            <td><input type="checkbox" name="paidIds[]" value="1"></td>
        </tr>
        <tr>
            <td>User2</td>                                             
            <td><input type="checkbox" name="paidIds[]" value="2"></td>
        </tr>
        <tr>
            <td>User3</td>                                             
            <td><input type="checkbox" name="paidIds[]" value="3"></td>
        </tr>
    </tbody>
</table>

//Javascript to select all checkbox once clicked on check all button.
<script>
    document.getElementById('select-all').onclick = function() {
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        for (var checkbox of checkboxes) {
        checkbox.checked = this.checked;
        }
    }
</script>

Comments

Popular posts from this blog

Restoring MySQL on XAMMP

  Follow these steps and save your time and databases:- Go to your  XAMMP  installation, it’s mostly in  C drive . Now inside  mysql  folder rename the folder  data  to  data-old  (or any other name you like) Create a new folder  data  under  mysql  folder Copy the contents of  backup  folder to the new  data  folder Now copy all your  database  folders that are in  data-old  folder to the new  data  folder (skip the mysql, performance_scheme and phpmyadmin folder) And the last, copy the  ibdata1  file from  data-old  folder and replace it inside new  data  folder Restart your  MYSQL  server from  XAMPP control panel . And done!

terms and condition checkbox validation before submit. JS

  <button type="submit" id="submit_button" disabled>Sign Up</button>   /JavaScript function that enables or disables a submit button depending //on whether a checkbox has been ticked or not. function terms_changed(termsCheckBox){ //If the checkbox has been checked if(termsCheckBox.checked){ //Set the disabled property to FALSE and enable the button. document.getElementById("submit_button").disabled = false; } else{ //Otherwise, disable the submit button. document.getElementById("submit_button").disabled = true; } }