JSFiddle - React, Tailwind, and code Playground

by Sandeep Kumar

HTML

<ul id="ulContainer">
    <li>
        <input type="checkbox" id="chkSelectAll" />
        Select All</li>
    <li>
        <input class="chkItem" type="checkbox">
        Item 1</li>
    <li>
        <input class="chkItem" type="checkbox">
        Item 2</li>
    <li>
        <input class="chkItem" type="checkbox">
        Item 3</li>
    <li>
        <input class="chkItem" type="checkbox">
        Item 4</li>
    <li>
        <input class="chkItem" type="checkbox">
        Item 5</li>
</ul>

CSS

ul{
  float:left;
}
ul li{
  list-style-type: none;
}

JavaScript

$('#ulContainer').on('click', '#chkSelectAll', function () {
		var icChecked = $(this).is(':checked');
		$("input.chkItem").each(function () {
        $(this).prop("checked", icChecked);
    });
});