How to select, all checkboxes on click select all using jQuery

To select all checkboxes on click single checkbox named select all, here is the code

Step1 Create a simple html page here we create test.html
<html>
<head>
</head>
    <body>
    <p>Choose your vehicle:</p>
	<div>
    <input class="chk_u"  type="checkbox" id="select-all">
    <label for="car">Select All</label>
    </div>
    <div>
    <input class="chk_u" type="checkbox" id="bike" name="vehicle" value="bike">
    <label for="bike">Bike</label>
    </div>
    <div>
    <input class="chk_u"  type="checkbox" id="car" name="vehicle" value="car">
    <label for="car">Car</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Bus" name="vehicle" value="car">
    <label for="Bus">Bus</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Truck" name="vehicle" value="car">
    <label for="Truck">Truck</label>
    </div>
     <div>
    <input class="chk_u"  type="checkbox" id="Cycle" name="vehicle" value="car">
    <label for="Cycle">Cycle</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Aeroplane" name="vehicle" value="car">
    <label for="Aeroplane">Aeroplane</label>
    </div>
    </body>
</html>
Step 2 Insert the below script tag in head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step 3 Now paste the below script in the end of page.
<script>

$(document).ready(function() {
    $('#select-all').click(function() {
        var checked = this.checked;
        $('input[class="chk_u"]').each(function() {
        this.checked = checked;
    });
    });
});

</script>
Final Code is below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
    <body>
    <p>Choose your vehicle:</p>
	<div>
    <input class="chk_u"  type="checkbox" id="select-all">
    <label for="car">Select All</label>
    </div>
    <div>
    <input class="chk_u" type="checkbox" id="bike" name="vehicle" value="bike">
    <label for="bike">Bike</label>
    </div>
    <div>
    <input class="chk_u"  type="checkbox" id="car" name="vehicle" value="car">
    <label for="car">Car</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Bus" name="vehicle" value="car">
    <label for="Bus">Bus</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Truck" name="vehicle" value="car">
    <label for="Truck">Truck</label>
    </div>
     <div>
    <input class="chk_u"  type="checkbox" id="Cycle" name="vehicle" value="car">
    <label for="Cycle">Cycle</label>
    </div>
	 <div>
    <input class="chk_u"  type="checkbox" id="Aeroplane" name="vehicle" value="car">
    <label for="Aeroplane">Aeroplane</label>
    </div>
    </body>
</html>
<script>

//below or above script not both because both will work same
$(document).ready(function() {
    $('#select-all').click(function() {
        var checked = this.checked;
        $('input[class="chk_u"]').each(function() {
        this.checked = checked;
    });
    });
});

</script>
Output of the above code is below:
Now when we click on “select all” checkbox, all checkboxes will be selected.

select all checkboxes on click using jQueryexpoundsofttechsolution


Get three-layer categories in magento 2