How to Implement "Select All" Check Box in Html

How to implement select all check box in angular js

check this code:

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

Check all checkboxes with JavaScript

This has worked for me.

function toggle(oInput) {
    var aInputs = document.getElementsByTagName('input');
    for (var i=0;i<aInputs.length;i++) {
        if (aInputs[i] != oInput) {
            aInputs[i].checked = oInput.checked;
        }
    }
}

Though, if you want to limit this to only certain checkboxes, add a classname to them, and to the master checkbox

<html>
<head>
<script type="text/javascript">
    function toggle(source) {
        var aInputs = document.getElementsByTagName('input');
        for (var i=0;i<aInputs.length;i++) {
            if (aInputs[i] != source && aInputs[i].className == source.className) {
                aInputs[i].checked = source.checked;
            }
        }
    }
 </script> 
 </head>
 <body>
 <input type='checkbox' class='checkall' onClick='toggle(this)' /><br />
 <input type='checkbox' class='checkall' name='orders[0][order_id]' value='16885' /><br />
 <input type='checkbox' class='checkall' name='orders[1][order_id]' value='17006' /><br />
 <input type='checkbox' class='checkall' name='orders[2][order_id]' value='17006' /><br />
 <input type='checkbox' class='checkall' name='orders[3][order_id]' value='17007' /><br />
 <input type='checkbox' class='checkall' name='orders[4][order_id]' value='17011' /><br />
 </body>
 </html>

Can you implement a select all checkbox in HTML without JavaScript?

While it is possible to achieve part of this functionality without the use of JavaScript, I wouldn’t recommend it as it doesn’t work in older browsers.

You could use the CSS3 :target pseudo-class to toggle between different <form>s in your markup. Demo: http://jsfiddle.net/mathias/kFH3e/

As you can see, it doesn’t really “toggle” the checkboxes, but just the forms; and if you’ve already checked some boxes in one of the form it will still be checked after you switch back and forth.

This is one of the cases where it’s perfectly acceptable to use JavaScript, as the “select all/none” buttons only enhance the UI; it’s still an acceptable experience without them.

TL;DR It’s okay to use JavaScript in this case.

How to check all checkboxes using jQuery?

You need to use .prop() to set the checked property

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

Demo: Fiddle

Next JS - Checkbox Select All

You can check the below logic with some explanation

You also can check this sandbox for the test

import { useState } from "react";
import { toppings } from "./utils/toppings";
// import InputTopings from "./InputTopings";
const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function TopingApp() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  // console.log(checkedState);
  const [total, setTotal] = useState(0);

  //Separate `updateTotal` logic for avoiding duplication
  const updateTotal = (checkboxValues) => {
    const totalPrice = checkboxValues.reduce((sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    }, 0);

    setTotal(totalPrice);
  };

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);
    //update total
    updateTotal(updatedCheckedState);
  };

  const handleSelectAll = (event) => {
    //filled all checkboxes' states with `Check All` value
    const updatedCheckedState = new Array(toppings.length).fill(
      event.target.checked
    );

    setCheckedState(updatedCheckedState);
    //update total
    updateTotal(updatedCheckedState);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <div className="call">
        <input
          type="checkbox"
          name="checkall"
          checked={checkedState.every((value) => value)}
          onChange={handleSelectAll}
        />
        <label htmlFor="checkall">Check All</label>
      </div>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    // id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Select all checkboxes by group in laravel 8

This works with your HTML if you add a class to the wrapper div - I chose groupContainer

I delegate from document - if you have a closer static container, use that instead

document.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type && tgt.type==="checkbox" && tgt.id.startsWith("selectall")) {
    const checked = tgt.checked; 
    const parent = tgt.closest(".groupContainer");
    const checks = parent.querySelectorAll("input[type=checkbox][id^=content]");
    [...checks].forEach(chk => {
      if (!chk.disabled) chk.checked = checked;
    })
  }
  
})
<div class="col-md-6 groupContainer">
  <div class="row mb-3 ">
    <div class="col-md-6">
      <b>Group 1</b>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="selectall_group1" type="checkbox" class="custom-control-input" />
        <label for="selectall_group1" class="custom-control-label">Select All</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p>content 1</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content10" class="custom-control-label mr-auto"></label>
      </div>
    </div>
    <div class="col-md-6">
      <p>content 1</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content11" class="custom-control-label mr-auto"></label>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6  groupContainer">
  <div class="row mb-3 ">
    <div class="col-md-6">
      <b>Group 2</b>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="selectall_group2" type="checkbox" class="custom-control-input" />
        <label for="selectall_group2" class="custom-control-label">
                                    Select All
                                    </label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p>content 2</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content12" class="custom-control-label mr-auto"></label>
      </div>
    </div>
    <div class="col-md-6">
      <p>content 2</p>
    </div>
    <div class="col-md-6 d-flex justify-content-end">
      <div class="custom-control custom-checkbox  custom-control-right">
        <input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
        <label for="content13" class="custom-control-label mr-auto"></label>
      </div>
    </div>
  </div>
</div>

Related Topics

How to Refresh Page on Back Button Click

Set Cookie and Get Cookie With JavaScript

Jquery Id Selector Works Only For the First Element

Custom Attributes - Yea or Nay

Maximum Size of a ≪Canvas≫ Element

Page Content Is Loaded With JavaScript and Jsoup Doesn't See It

How to Get a File or Blob from an Object Url

How to Perform a Real Time Search and Filter on a HTML Table

How to Clear the Contents of an Iframe from Another Iframe

Html5 Localstorage Error With Safari: "Quota_Exceeded_Err: Dom Exception 22: an Attempt Was Made to Add Something to Storage That Exceeded the Quota."

Encryption in JavaScript and Decryption With PHP

How to Send Formdata Objects With Ajax-Requests in Jquery

When Is a Cdata Section Necessary Within a Script Tag

How to Specify a Suggested Filename When Using Data: Uri

Reading File Contents on the Client-Side in JavaScript in Various Browsers

JavaScript String/Integer Comparisons

How to Detect Ctrl+V, Ctrl+C Using JavaScript

Html5 File API Read as Text and Binary


Leave a reply



Submit