Select all buttons css

You can use any valid CSS selector with querySelectorAll(), not just ‘button’. For example, you could use ‘#some-id’ to find an element with the ID ‘some-id’, or ‘.some-class’ to find all elements with the class ‘some-class’.

Here’s a more complete example that demonstrates how you might use querySelectorAll() to add a click event listener to all buttons on a webpage:

When you open this HTML file in a web browser and click on one of the buttons, the text content of the button (e.g., «Button 1») will be logged to the console.

Источник

How to create a «Select All» checkbox

Many candidates are rejected or down-leveled in technical interviews due to poor performance in behavioral or cultural fit interviews. Ace your interviews with this free course, where you will practice confidently tackling behavioral interview questions.

Introduction

The “select all” checkbox is a User Interface element present in some Web applications that allows you to select multiple items or data fields at once so you can perform the same action on the selected items.

The HTML markup

The markup for your layout can vary depending on the project. In this article, we’ll use HTML tables:

If you look at the for attribute of each label , you’ll realize that they are unique for each input (check the HTML for the complete code).

Though this HTML is static, when you implement this feature with a server-side programming language, the value of the for attribute should be dynamically generated for each label .

The CSS styling

There is nothing advanced about the CSS code – it’s straight to the point:

table < border-collapse: collapse; margin: 1.2em auto; width: 90%; word-wrap: break-word; >thead < background-color: #1560bd; color: #ffffff; text-align: left; >/* Code truncated to save space */ 

When you load the HTML with the CSS in your Web browser, you’ll get an output similar to the image below.

This page has no interactivity, let’s fix that with JavaScript.

The JavaScript

The logic behind the “select all” checkbox is discussed below.

• When the user clicks and select the “select all” checkbox, the script should select all checkboxes in the table.
• When the user deselects the “select all” checkbox, the script should deselect all checkboxes in the table.

On the initial loading of the script, there is a check to confirm that the submit input exists on the page before we do anything else. If you take a look at the HTML, the submit input will have an HTML ID value of multiple_deletion , this is used in the check.

if (document.getElementById("multiple_deletion")) < // Other code upcoming >

Variables are also used to keep track of the checked checkboxes. However, before anything else, the value of this variable is initiated to zero, and the button used to perform multiple deletions after clicking on the “select all” checkbox is hidden.

if (document.getElementById("multiple_deletion"))

When the user clicks on the “select all” check box, the following algorithm is performed:

• Loop through the checkboxes using a for loop
• If the “select all” checkbox is indeed checked
  • Highlight all table rows
  • Change the checked attribute of each checkbox to true
  • Increment the value of the checked variable using the post-increment operator
  • Remove all the table highlights
  • Set the checked attribute of all checkboxes to false
  • Decrement the value of the checked variable using post-decrement operator
  • Show the button for multiple deletion
  • Else, hide the button for multiple deletion

  This algorithm is encapsulated in the code below:

  if (document.getElementById("multiple_deletion")) < // Previous code remain the same. let select_all_checkboxes = document.getElementById("select_all_checkboxes"); let delete_checkbox = document.getElementsByClassName("delete_checkbox"); select_all_checkboxes.addEventListener("click", function () < for (let i = 0; i < delete_checkbox.length; i++) < if (select_all_checkboxes.checked === true) < highlightAllTableRows(); delete_checkbox[i].checked = true; checked++; >else < removeTableRowsHighlight(); delete_checkbox[i].checked = false; checked--; >if (checked > 0) < multiple_deletion.style.display = "block"; >else < multiple_deletion.style.display = "none"; >> >); > 

  You should know that I deleted some comments from the code above (and in the code before it) to keep it uncluttered.

  Before we proceed,we need to clarify two things implemented from the algorithm above, these are the functions highlightAllTableRows() and removeTableRowsHighlight() . Both of the names of these functions describe what they do.

  The highlightAllTableRows() does the following:

  • Loops through the table rows
  • If the table row is not the first row that contains the “select all” checkbox and does not contain the highlighted CSS class:
    • Add the highlighted CSS class

    These steps are shown in the code below:

    // Place this function outside the 'if' statement function highlightAllTableRows() < let row = document.getElementsByClassName("table-row"); for (let i = 0; i < row.length; i++) < if (!row[i].classList.contains("highlighted") && i !== 0) < row[i].classList.add("highlighted"); >> > 

    The function removeTableRowsHighlight() does the opposite – this is shown in the code below:

    // Place this function outside the 'if' statement function removeTableRowsHighlight() < let row = document.getElementsByClassName("table-row"); for (let i = 0; i < row.length; i++) < if (row[i].classList.contains("highlighted") && i !== 0) < row[i].classList.remove("highlighted"); >> > 

    Moving forward, each row in the table has its associated checkbox. These checkboxes have a class attribute of delete_checkbox and are selected using the DOM method document.getElementsByClassName returns an HTMLCollection . Therefore, we have to loop through the result if there is a need to perform any operation on the checkboxes.

    During this process, an event listener listens for a click is attached to each individual checkbox. When the user clicks on a checkbox, the following operations are performed:

    • Highlight the table row
    • Increment the checked variable by 1
    • “Delete” checkbox when the user unchecks
      • Set the checked attribute of the “select all” checkbox to false
      • Remove the row highlight
      • Decrement the checked variable by 1
      • Show the button for multiple deletion
      • Else, hide the button for multiple deletion

      // Place this code inside the 'if' statement for (let i = 0; i < delete_checkbox.length; i++) < delete_checkbox[i].addEventListener("click", function () < if (delete_checkbox[i].checked === true) < highlightTableRow(); checked += 1; >else if (delete_checkbox[i].checked === false) < select_all_checkboxes.checked = false; removeTableRowHighlight(); checked -= 1; >if (checked < 0) < checked = 1; >if (checked > 0) < multiple_deletion.style.display = "block"; >else < multiple_deletion.style.display = "none"; >>); > 

      We are almost done, but you need to know about two additional things included in the code snippet above, the functions highlightTableRow() and removeTableRowHighlight() . The functions are responsible for highlighting (and removing highlighting) from a specific table row that the user has clicked on.

      The function highlightTableRow() performs a loop on the entire table. During this process, an event listener is attached to each row that listens for a click event and makes sure that the input in that table row is checked before the highlight is applied:

      function highlightTableRow() < let table_row = document.getElementsByClassName("table-row"); for (let i = 0; i < table_row.length; i++) < let row = table_row[i]; if (i !== 0) < row.addEventListener("click", function () < if (row.children[0].childNodes[3].checked === true) < row.classList.add("highlighted"); >>); > > > 

      You might find the following line a bit strange:

      if (row.children[0].childNodes[3].checked === true) <> 

      This line targets the input checkbox that 3 levels deep in each table row. Take a look at the following HTML and count the number of elements in the tr element:

      The removeTableRowHighlight() function does the opposite, it removes the row highlight:

      function removeTableRowHighlight() < let table_row = document.getElementsByClassName("table-row"); for (let i = 0; i < table_row.length; i++) < let row = table_row[i]; if (i !== 0) < row.addEventListener("click", function () < if ( !row.children[0].childNodes[3].checked === true && row.classList.contains("highlighted") ) < row.classList.remove("highlighted"); >>); > > > 

      Источник