Skip to content

Instantly share code, notes, and snippets.

@DamienLucchese

DamienLucchese/imgToggleCustomCheckbox

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DamienLucchese/2bb5fa14485da4821903 to your computer and use it in GitHub Desktop.
Save DamienLucchese/2bb5fa14485da4821903 to your computer and use it in GitHub Desktop.
Download ZIP
Quick IMG Class Toggle Custom Checkbox
Raw
imgToggleCustomCheckbox
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- Hi, here's a way you can make custom checkboxes with a little HTML, CSS, and jQuery.
You can make your own img file, host it, change the link in the css and make it your own.
Also, if you're just getting into web development,
this is a great way to get familiar with how HTML, CSS, & Javascript interact and help eachother.
I hope you find this helpful.
Any questions, you can find me on twitter @DamienL1213 -->
<!-- THESE ARE THE STYLE CHANGES. SHOULD GO IN CSS FILE.
IF YOU ADD IT INTO A LINKED CSS FILE, YOU DO NOT NEED THE "<STYLE>" OPENER NOR CLOSER.-->
<style>
.checkbox .checkbox_1 {
display: none;
}
.cus_checkbox {
background: url("https://lh3.googleusercontent.com/mD4Lnhah3Tlz9sPo8GLNgzhnj31swPdIuglabOYULiM=w39-h80-no") no-repeat;
display: inline-block;
padding-left: 2px;
position: relative;
width: 40px;
height: 40px;
}
.cus_checkbox_on {
background-position: 0px -40px;
}
.cus_checkbox_off {
background-position: 0px 6px;
}
</style>
<!-- /THESE ARE THE STYLE CHANGES. SHOULD GO IN CSS FILE.
IF YOU ADD IT INTO A LINKED CSS FILE, YOU DO NOT NEED THE "<STYLE>" OPENER NOR CLOSER.-->
<!-- THIS IS THE CHECKBOX HTML -->
<!-- PLEASE NOTE: THE LABEL "for=''" SHOULD MATCH THE INPUT "id=''"
IF MULTIPLE CHECKBOXES, THEY NEED TO BE UNIQUE -->
<div class="checkbox text-center">
<input type="checkbox" class="checkbox_1" id="checkbox_1" name="checkbox_1" checked="checked" />
<label class="cus_checkbox cus_checkbox_on" for="checkbox_1"></label>
</div>
<!-- /THIS IS THE CHECKBOX HTML -->
<!-- THIS IS A BIT OF SCRIPT THAT TOGGLES THE CLASS OF THE CLICKED SPACE. THE CLASSES DETERMINE IF THE GRAPHIC SHOWN.
SAME IMG FILE REFERENCED IN BOTH CASES BUT THE POSITIONING OF THE BACKGROUND IMG DISPLAYS "ON" OR "OFF." -->
<script type="text/javascript">
$(document).ready(function(){
$('.cus_checkbox').click(function() {
$(this).toggleClass('cus_checkbox_on');
$(this).toggleClass('cus_checkbox_off');
});
});
</script>
<!-- /THIS IS A BIT OF SCRIPT THAT TOGGLES THE CLASS OF THE CLICKED SPACE. THE CLASSES DETERMINE IF THE GRAPHIC SHOWN.
SAME IMG FILE REFERENCED IN BOTH CASES BUT THE POSITIONING OF THE BACKGROUND IMG DISPLAYS "ON" OR "OFF." -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment