label as checkbox
HTML
<div>
<p>
<label for="check">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAYABgDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAcEBgX/xAAnEAEAAQQBBAEDBQAAAAAAAAABAgADBBEFBhIhQRMxYZEHcYGh8f/EABYBAQEBAAAAAAAAAAAAAAAAAAQDAv/EABoRAAIDAQEAAAAAAAAAAAAAAAABAgMREkH/2gAMAwEAAhEDEQA/AMHReJYxsXAtSgfLkW5ZVxTfhUifg8fu1RodPcRjYcr0oWJ3pR1dvXHar9QXwBvQFcL0vi2MrlOMsZ0ZSs3ePhuIoSAEBPPrbqqHlYWBjY2Lx1vHZYspsZRZroR2quzX+VFvqT0tXHERTrjjoYN0+OXcE0iv10m/P9filbv1DhiY1yWFgWC1Zta0Crt8O1+6FKRVJ8kbYro7PkuJucN0lhclGXZmcbZtSn2yFGLEkb9mlGvb6luyxsUycbjTMvp3QlF0jrYp79OylKLvoit4iTc7hchnce37sfkzL1wu3YnhImwiH2VU/mlKVqFskg81sj//2Q==" /> This is the label</label>
<input type="checkbox" id="check" name="check" />
</p>
</div>
CSS
div {
padding:20px;
border:1px solid black;
}
.hcf-Checked{
background:green;
}
.hcf-VisibilityHidden{
border: 0;
clip: rect(0 0 0 0);
height: 0px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
JavaScript
(function($){
var methods = {
init : function (options) {
var settings = $.extend( {
'checkedLabelClass': 'hcf-Checked',
'checkboxHideClass': 'hcf-VisibilityHidden'
}, options);
return this.each(function(){
var $this, label, id, img, checkbox, checked;
function handleIEClick () {
var checked;
checked = checkbox.is(':checked');
if (checked) {
checkbox.attr('checked', false);
} else {
checkbox.attr('checked', true);
}
checkbox.trigger("change");
}
function handleCheckboxChange () {
var checked;
checked = checkbox.is(':checked');
if (checked) {
$this.addClass(settings.checkedLabelClass);
} else {
$this.removeClass(settings.checkedLabelClass);
}
}
$this = $(this);
img = $this.find('img');
id = $this.attr('for');
checkbox = $('#' + id);
checked = checkbox.is(':checked');
if (checked) {
$this.addClass(settings.checkedLabelClass);
}
checkbox
.addClass(settings.checkboxHideClass)
.bind('change', handleCheckboxChange);
if ($.browser.msie) {
img.bind('click', handleIEClick);
}
});
},
remove : function () {
}
};
$.fn.hcfCustomCheckbox = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
}...