Jquery javascript check all checkboxes one-liner

Home

written by bcoos on 3 December 2011

JQuery Javascript:

<script type="text/javascript">
	$(function () { 
		$('.checkAll').click(function () { $(this).parent().find(':checkbox').attr('checked',$(this).attr('checked'));});
	});
</script>

HTML:

<div class="container">
	<input class="checkAll" type="checkbox"><span class="title">Properties</span>
	<ul class="list">
		<li><input value="1" type="checkbox">Property 1</li>
		<li><input value="2" type="checkbox">Property 2</li>
		<li><input value="3" type="checkbox">Property 3</li>
		<li><input value="4" type="checkbox">Property 4</li>
		<li><input value="5" type="checkbox">Property 5</li>
		<li><input value="6" type="checkbox">Property 6</li>
	</ul>
</div>

CSS:

<style type="text/css"> 
	ul.list          { list-style-type:none;margin-left:0px;}
	ul.list li       { float:left;width:33%;} 
	.container input { margin-right:4px;} 
	div .title       { font-size:16px;font-weight:bold;}
</style>

javascript jquery check all

Jquery javascript check all checkboxes one-liner

Comments