Skip to content

Instantly share code, notes, and snippets.

@mustafix

mustafix/Checkbox style

Last active March 12, 2019 15:31
Show Gist options
  • Save mustafix/604cdb838fe4aac63da318ad0f038c2f to your computer and use it in GitHub Desktop.
Save mustafix/604cdb838fe4aac63da318ad0f038c2f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Checkbox style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>
<input id="checkall" type="checkbox">
<label for="checkall"><b>Check All</b></label>
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="" value="" class="check_item" id="checkbox1">
<label for="checkbox1">One</label>
</td>
<td>
<input type="checkbox" name="" value="" class="check_item" id="checkbox2">
<label for="checkbox2">two</label>
</td>
<td>
<input type="checkbox" name="" value="" class="check_item" id="checkbox3">
<label for="checkbox3">three</label>
</td>
<td>
<input type="checkbox" name="" value="" class="check_item" id="checkbox4">
<label for="checkbox4">four</label>
</td>
</tr>
</table>
<script src="jquery.min.js"></script>
<script>
$("#checkall").change(function(){
$(".check_item").prop("checked",$(this).prop("checked"))
})
$(".check_item").change(function(){
if($(this).prop("checked")== false){
$("#checkall").prop("checked",false)
}
if($(".check_item:checked").length == $(".check_item").length){
$("#checkall").prop("checked", true)
}
})
</script>
</body>
</html>
<style>
/* Checkbox css*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
cursor: pointer;
}
input[type="checkbox"] + label::before {
border: 1px solid #ddd;
color: transparent;
content: "✔";
display: inline-block;
height: 15px;
line-height: 14px;
margin-right: 7px;
text-align: center;
width: 15px;
font-size: 12px;
}
input[type="checkbox"]:checked + label::before {
background: #468FB9 none repeat scroll 0 0;
color: #fff;
border: 1px solid #468FB9;
transition: all 0.3s ease 0s;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment