JSFiddle - React, Tailwind, and code Playground
HTML
<label>
<input type='checkbox' id='checkAll' name='name1' class='selectall' />
</label>
<label>
<input type="checkbox" name="name2" value="1" class='check'/>1</label>
<label>
<input type="checkbox" name="name2" value="2" class='check'/>2</label>
<label>
<input type="checkbox" name="name2" value="3" class='check'/>3</label>
<label>
<input type="checkbox" name="" value="4" class='check'/>4</label>
<label>
<input type="checkbox" name="" value="5" class='check'/>5</label>
CSS
.custom-checkbox{
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
}
.custom-checkbox:hover{
background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
}
.custom-checkbox.selected{
background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png") no-repeat;
}
.custom-checkbox input[type="checkbox"]{
margin: 0;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}
JavaScript
function customCheckbox(checkboxName){
var checkBox = $('input[name="'+ checkboxName +'"]');
$(checkBox).each(function(){
$(this).wrap( "<span class='custom-checkbox'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
});
$(checkBox).click(function(){
$(this).parent().toggleClass("selected");
});
}
$(document).ready(function (){
customCheckbox("name1");
customCheckbox("name2");
})
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});