Checkbox link

Turning a checkbox into a ‘clickable’ label

1. Wrap the checkbox in a label:

<label>Save for later <input type="checkbox" value="1" name="list" class="checkbox" /></label>

2: Hide the checkbox and style the label:

.save-for-later {
	cursor: pointer;
}
.save-for-later input {   
	display: none;
}
.checked {
	text-shadow: 1px -1px 1px rgba(68,68,68,0.4);  
	position: relative;  
	top: 1px;  
	left: 1px;
}

3. Check the box when the label is clicked:

jQuery(function() {  
    labelCheck();
});

function labelCheck() {
    $("#container .save-for-later").each( function(){
	$(this).find('input:checkbox').change(function() {
	    $(this).parent().toggleClass('checked');
	});
    });
}
Add a comment

Leave a Comment

Your email address will not be published.