JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<form method="post" id="form">
	<input type="checkbox" class="check" id="check1" name="check1" />
	<label for="check1" class="checkLabel">1 check</label><br>

	<input type="checkbox" class="check" id="check2" name="check2" />
	<label for="check2" class="checkLabel">2 check</label><br>
	
	<input type="checkbox" class="check" id="check3" name="check3" />
	<label for="check3" class="checkLabel">3 check</label><br>
	
	<input type="checkbox" class="check" id="check4" name="check4" />
	<label for="check4" class="checkLabel">4 check</label><br>
</form>

JavaScript

$(document).ready(function() {
	$(".check").change(function(){
	
		var form = $('#form').serialize();
		if ($(this).prop('checked')) {
			alert(form);
		} else {
			alert(form);
		}
	});
});