A simple checked all checkbox with a button

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Toggle</title>
		<script src="../js/jquery/jquery-1.6.2.min.js"></script>
		<script>
		$(function() {

			var $boton = $("#checkAll");

			$boton.toggle(function() {

				$boton.text("uncheck All");

				$(".ck-all").prop("checked", true);

			}, function() {

				$boton.text("Check all");

				$(".ck-all").prop("checked", false);

			});
			
		});
		</script>
	</head>

	<body>
	
		<div>
			<button id="checkAll" type="button">Check all</button>
		</div>

		<ul>
			<li>1.- <input type="checkbox" name="algo[]" class="ck-all" value="1" /></li>
			<li>2.- <input type="checkbox" name="algo[]" class="ck-all" value="2" /></li>
			<li>3.- <input type="checkbox" name="algo[]" class="ck-all" value="3" /></li>
			<li>4.- <input type="checkbox" name="algo[]" class="ck-all" value="4" /></li>
		</ul>
		
		<p>5.- <input type="checkbox" name="otro" class="ck-no" value="5" /></p>

	</body>
</html>
Tags:

Leave a Reply