/**
* Initialize customized checkbox
* @element to apply
**/
$.fn.setCustomizedCheckbox = function() {
var IEVersion = getIEVersion();
if(!IEVersion || IEVersion > 8) return; // Ignore greater than IE 8
var $this = $(this),
$checkboxes = $this.find(".search-customized-checkbox input[type=checkbox]");
$checkboxes.each(function(index) {
var $this = $(this),
$label = $this.siblings("label").eq(0),
$span = $("<span>").addClass("custom-checkbox");
var isChecked = getCheckboxStatus($label);
$span.addClass(isChecked ? "checked" : "");
$label.addClass(IEVersion === 8 ? "hidden-for-ie8" : "");
$label.prepend($span);
$label.on("click", _onStatusChanged)
});
function getCheckboxStatus(element) {
var $checkbox = $("#" + element.attr("for"));
return $checkbox.is(":checked");
}
function getIEVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0) {
return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
} else {
return 0;
}
}
function _onStatusChanged(event) {
event.stopPropagation();
var $this = $(this),
$mock = $this.children("span.custom-checkbox");
var isChecked = !getCheckboxStatus($this);
if(isChecked) {
$mock.addClass("checked");
} else {
$mock.removeClass("checked");
}
}
}
$(document).ready(function() {
$("#checkboxes, #checkboxes2").setCustomizedCheckbox();
});
<div id="checkboxes">
<ul class="search-customized-checkbox search-option-items">
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1360" value="1360" checked>
<label for="optionItem1360" class="item-name">엘룸</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1361" value="1360">
<label for="optionItem1361" class="item-name">골룸골룸</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1362" value="1360">
<label for="optionItem1362" class="item-name">엘리시아</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1363" value="1360">
<label for="optionItem1363" class="item-name">엘룸</label>
</li>
</ul>
</div>
<div id="checkboxes2">
<ul class="search-customized-checkbox search-option-items">
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1370" value="1360" checked>
<label for="optionItem1370" class="item-name">엘룸</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1371" value="1360">
<label for="optionItem1371" class="item-name">골룸골룸</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1372" value="1360">
<label for="optionItem1372" class="item-name">엘리시아</label>
</li>
<li class="search-option-item">
<input type="checkbox" data-name="brands" id="optionItem1373" value="1360">
<label for="optionItem1373" class="item-name">엘룸</label>
</li>
</ul>
</div>
.search-customized-checkbox,
.search-customized-checkbox li {
margin: 0;
padding: 0;
list-style: none;
}
.search-customized-checkbox input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0,0,0,0);
}
.search-customized-checkbox input[type="checkbox"] + label > span.custom-checkbox,
.search-customized-checkbox input[type="checkbox"] + label:before {
background: url(http://rootbox.co.kr/resources/customized_checkbox/customized_checkbox.png) no-repeat 0 0;
}
.search-customized-checkbox input[type="checkbox"] + label:hover > span.custom-checkbox,
.search-customized-checkbox input[type="checkbox"] + label:hover:before {
background-position: -14px 0;
}
.search-customized-checkbox input[type="checkbox"] + label {
position: relative;
display: inline-block;
padding: 2px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.search-customized-checkbox input[type="checkbox"] + label > span.custom-checkbox,
.search-customized-checkbox input[type="checkbox"] + label:before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin: -2px 8px 0 0;
line-height: 14px;
text-align: center;
vertical-align: middle;
}
.search-customized-checkbox input[type="checkbox"] + label > span.custom-checkbox.checked,
.search-customized-checkbox input[type="checkbox"]:checked + label:before {
background-position: -28px 0;
}
.search-customized-checkbox input[type="checkbox"] + label:hover > span.custom-checkbox.checked,
.search-customized-checkbox input[type="checkbox"]:checked + label:hover:before {
background-position: -42px 0;
}
.search-customized-checkbox input[type="checkbox"] + label.hidden-for-ie8:before {
content: none;
display: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.search-customized-checkbox input[type="checkbox"] + label > span.custom-checkbox,
.search-customized-checkbox input[type="checkbox"] + label:before {
background-image:url(http://rootbox.co.kr/resources/customized_checkbox/[email protected]);
background-size: 56px 14px;
}
}
External resources loaded into this fiddle: