Created
August 27, 2012 23:58
-
-
Save JoeHana/3493556 to your computer and use it in GitHub Desktop.
Those Form Checkboxes are made only with jQuery (without further plugins). The needed markup consists only of a input:checkbox and a label. The Rest is done via CSS and JS. The Goal was to have a custom solution which doesn't rely on a plugin, can be cus
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<div class="description"> | |
<p>the basic layout consist of a "input" (checkbox) and a "label". The "div" isn't mandatory, rather its only for demo purpose</p> | |
<br /> | |
<p>the checkboxes are only visible for demo purposes and can be hidden.</p> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-photos" /> | |
<label>Photos</label> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-music" /> | |
<label>Music</label> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-video" /> | |
<label>Video</label> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-photos" /> | |
<label>Photos</label> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-music" /> | |
<label>Music</label> | |
</div> | |
<div class="field-wrap"> | |
<input type="checkbox" id="checkbox-video" /> | |
<label>Video</label> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('label').each(function() { | |
var labelClass = $(this).prev('input').attr('id'); | |
$(this).addClass(labelClass); | |
if($(this).prev('input').is(':checked')) { | |
$(this).addClass('checked'); | |
$(this).toggle(function() { | |
$(this).removeClass('checked'); | |
$(this).prev('input').attr('checked', false); | |
}, function(){ | |
$(this).addClass('checked'); | |
$(this).prev('input').attr('checked', true); | |
}); | |
} else { | |
$(this).removeClass('checked'); | |
$(this).toggle(function() { | |
$(this).addClass('checked'); | |
$(this).prev('input').attr('checked', true); | |
}, function(){ | |
$(this).removeClass('checked'); | |
$(this).prev('input').attr('checked', false); | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* actually the whole thing relies on JS. So it should be implemented with caution. | |
* Make sure you have a class/id which gets applied when the browser supports JS (like cssua.org or | |
* modernizr) and append it to your custom styling. It must make sure that it has a fallback to the default | |
* styles without breaking the layout. | |
*/ | |
body {background: #111;} | |
.wrapper {width: 600px; margin: auto;} | |
.description p {color: #CCC;} | |
/* the div is only styled for demo purpose */ | |
div .field-wrap { | |
width: 295px; | |
height: 40px; | |
padding: 0 5px 0 0; | |
margin: 10px 0; | |
float: left; | |
} | |
/* the input is styles only for demo purpose */ | |
input[type=checkbox] { | |
float: right; | |
} | |
/* feel free to style the label element however you want. Make sure styling get only applied if the browser supports js.*/ | |
label { | |
width: 220px !important; | |
height: 40px; | |
padding: 0 0 0 50px; | |
vertical-align: middle; | |
text-align: left; | |
line-height: 44px; | |
font-size: 14px; | |
color: #CCC; | |
cursor: pointer; | |
float: left; | |
display: block; | |
background-color: #222; | |
background-repeat: no-repeat; | |
background-position: 8px 4px; | |
opacity: 0.7; | |
-o-border-radius: 5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
-o-transition: all .1s linear; | |
-moz-transition: all .1s linear; | |
-webkit-transition: all .1s linear; | |
transition: all .1s linear; | |
} | |
.checked {color: #333; background-color: #F90 !important; opacity: 1;} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment