The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
jQuery FormGroup
"jQuery FormGroup" is the simple and compact plugin for customize checkboxes/radio elements from CSS.
The cheked elements have ".checked" and unchecked have ".unchecked" CSS class property.
Tested on browsers:
- Safari3/4
- Firefox2/3
- Opera9
- MSIE6/7/8
- Flock2.0.3
- SeaMonkey1.1.15
Plugin source:
jQuery.fn.formGroup = function(){
return this.each(function(){
if(jQuery(this).not('.ready')){
var o = this;
jQuery('input', this).each(function(){
jQuery(this)
.css({opacity:0, margin:0, padding:0, width:'0px', height:'0px', visibility:'hidden', overflow:'hidden'})
.wrap( jQuery("<span class='"+((jQuery(this).is(':checked'))? 'checked' : 'unchecked')+"'></span>").css({overflow:'hidden', cursor:'pointer', font:'normal 0px/0px arial', letterSpacing:'0px', wordSpacing:'0px'}) )
.parent().click(function(){
var status = (jQuery('input', this).is(':checked')) ? false : true;
jQuery('input:checkbox', this).attr('checked', status);
if(status) jQuery('input:radio', this).attr('checked', true);
if(jQuery('input', this).is(':radio')) jQuery('.checked', o).removeClass('checked').addClass('unchecked');
jQuery(this).removeClass('checked').removeClass('unchecked').addClass((jQuery('input', this).is(':checked'))? 'checked' : 'unchecked');
});
});
jQuery(this).addClass('ready');
}
});
};Usage:
1. Describe CSS classes (".checked", ".unchecked") in your styles.
For a sample:
.checked, .unchecked {display:block; width:100px; height:100px; float:left; margin:0 5px 5px 0;}
.checked {background:#4e0; border:2px solid #999;}
.unchecked {background:#aaa; border:2px solid #999;}
br {clear:both; width:100%;}2. For markup as follows:
<div class='formGroup'>
<input type='radio' name='some_radio_0' value='1' />
<input type='radio' name='some_radio_0' value='2' />
<input type='radio' name='some_radio_0' value='3' />
</div>
<br />
<div class='formGroup'>
<input type='checkbox' name='some_checkbox_1[]' value='a' />
<input type='checkbox' name='some_checkbox_1[]' value='b' />
<input type='checkbox' name='some_checkbox_1[]' value='c' />
</div>3. Init "jQuery FormGroup"
$('.formGroup').formGroup();Copyright (c) 2009 Max Chuhryaev - wwwebmax(at)gmail(dot)com
