JSFiddle - React, Tailwind, and code Playground

by Руслан Абсалямов

HTML

<form id="form1" action="" mechod="POST">
<input type="checkbox" name="cb_all" value="all">
<input type="checkbox" name="cb[1]" value="1" class="qwe">
<input type="checkbox" name="cb[2]" value="2" class="qwe">
<input type="checkbox" name="cb[3]" value="3" class="qwe">
<input type="checkbox" name="cb[4]" value="4" class="qwe">
<input type="checkbox" name="cb[6]" value="6" class="qwe">
<input type="checkbox" name="cb[7]" value="7" class="qwe">
<input type="checkbox" name="cb[8]" value="8" class="qwe">
<script>allCheckbox()</script>
<button id="delete" class="hiden">Удалить</button>
</form>

CSS

.hiden{display: none;}

JavaScript

function allCheckbox() 
{
	window.onload = function()
		{
			var f = document.getElementById('form1');
			f.cb_all.onchange = function(e)
			{
				var el = e ? e.target : e.srcElement;
				var qwe = el.form.getElementsByClassName('qwe');
				for (var i =0; i<qwe.length; i++) 
				{
					if (el.checked) 
					{
						qwe[i].checked = true;
					} else 
					{
						qwe[i].checked = false;
					}
				}
			}
		}
}
$(document).ready(function(){
$("#form1 input:checkbox").change(function(){
$("#delete").toggle($("#form1 input:checkbox:checked").length>0);
	});
});