Checkbox Checked-all-none-toggle

checkbox-checked-all-none-toggle.html

<form action="" method="POST" name="tenants">
	<table class="list">
		<caption>Users</caption>
		<thead>
			<tr>
				<th>&nbsp;</th>
				<th>Name</th>
			</tr>
		</thead>
		<tbody>
			<tr class="highlight">
				<td><input type="checkbox" class="ckb" name="ids[]" value="1"></td>
				<td><a href="#">Anyee</a></td>
			</tr>
			<tr class="highlight">
				<td><input type="checkbox" class="ckb" name="ids[]" value="2"></td>
				<td><a href="#">John</a></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">Select:&nbsp; <a id="selectAll" href="#ckb">All</a>&nbsp;&nbsp;
					<a id="selectNone" href="#ckb">None</a>&nbsp;&nbsp; <a
					id="selectToggle" href="#ckb">Toggle</a>&nbsp;&nbsp;
				</td>
			</tr>
		</tfoot>
	</table>
</form>

<script type="text/javascript">

$(function(){
	
    $('table.list input:checkbox:checked').trigger('change');
    
    $('#selectAll').click(function(e) {
        e.preventDefault();
        var target = $(this).attr('href').substr(1, $(this).attr('href').length);
        $(this).closest('form')
            .find('input:enabled:checkbox.'+target)
            .prop('checked', true)
            .trigger('change');
    
        return false;
     });
    
    
    $('#selectNone').click(function(e) {
        e.preventDefault();
        var target = $(this).attr('href').substr(1, $(this).attr('href').length);
        $(this).closest('form')
            .find('input:enabled:checkbox.'+target)
            .prop('checked', false)
            .trigger('change');
        return false;
     });
    
    $('#selectToggle').click(function(e) {
        e.preventDefault();
        var target = $(this).attr('href').substr(1, $(this).attr('href').length);
        $(this).closest('form')
            .find('input:enabled:checkbox.'+target)
            .each(function() {
                $(this)
                    .prop('checked', !$(this).is(':checked'))
                    .trigger('change');
             });
        return false;
     });

});
</script>