Username Password        Sign up Lost password

Javascript


Jquery javascript check all checkboxes one-liner

written by bcoos on 3 December 2011

Properties
  • Property 1
  • Property 2
  • Property 3
  • Property 4
  • Property 5
  • Property 6


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>





View all tags javascript jquery check all Write a comment


Powered by bcoos 2.0 | 0.012 seconds | 28 queries | SQL: 0.0044 seconds | 41 files: 310.38 KB | HTML: 8.34 KB