Simple Select / Deselect checkbox in JQUERY
Only Few Lines of codes
<!doctype>
<html>
<head>
Jquery Select All
</head>
<body>
<fieldset>
<legend>Reasons to be happy</legend>
<a class="selectAll" href="#">Select All</a>
<a class="deselectAll" href="#">Deselect All</a>
<input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
<label for="iwokeup">I woke up</label>
<input name="reasons" id="health" type="checkbox" value="health" />
<label for="health">My health</label>
<input name="reasons" id="family" type="checkbox" value="family" />
<label for="family">My family</label>
<input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
<label for="sunshine">The sun is shining</label>
</fieldset>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$('fieldset .selectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and select them
$(this).siblings('input:checkbox').attr('checked','checked');
});
// find the "Deselect All" link in a fieldset and list for the click event
$('fieldset .deselectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and deselect them
$(this).siblings('input:checkbox').removeAttr('checked');
});
</script>
</body>
</html>
LIVE DEMO
Only Few Lines of codes
<!doctype>
<html>
<head>
Jquery Select All
</head>
<body>
<fieldset>
<legend>Reasons to be happy</legend>
<a class="selectAll" href="#">Select All</a>
<a class="deselectAll" href="#">Deselect All</a>
<input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
<label for="iwokeup">I woke up</label>
<input name="reasons" id="health" type="checkbox" value="health" />
<label for="health">My health</label>
<input name="reasons" id="family" type="checkbox" value="family" />
<label for="family">My family</label>
<input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
<label for="sunshine">The sun is shining</label>
</fieldset>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$('fieldset .selectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and select them
$(this).siblings('input:checkbox').attr('checked','checked');
});
// find the "Deselect All" link in a fieldset and list for the click event
$('fieldset .deselectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and deselect them
$(this).siblings('input:checkbox').removeAttr('checked');
});
</script>
</body>
</html>
LIVE DEMO
No comments:
Post a Comment
Thank your for your comment..your submitted coment will be live after admin approval