Checkbutton and Radiobuttons revisited: a jQuery plug-in.

Thursday, 25 March 2010 00:45 by Tom Gröger

 

Well some time ago I posted the code for a jquery plugin to Radiobutton-Groups  ( a jQuery Room for Radiogroups) . As usual, soon after I had finished my code I came across a problem where I had to manage a large group of check buttons. Not a big deal though, after all check buttons are much like radio buttons, except that the later normally should return a value indicating which of the buttons in the group has been selected ( and while there is only one radio button possibly selected at a time, this makes perfect sense ). 

Check buttons in comparison are mostly used to return a bit value – checked or not checked. Before Ajax a check button value was necessary because the only way a checkbox could tell the Server whether it was checked or not was to set its value into the Request.Form collection, but fortunately times are a-changing: Now all we need to know is it’s checked state. Also, check buttons can be grouped together to a logical unit, but it doesn’t make sense for such a group to return a single value as with radio groups - this differences had to be handled in order to create a plug in that would manage both radio- and check button groups.

 

The outcome was a JQuery plugin, or better two plug ins:

 

 

 btngroup

$.fn.Checkbox wraps a check- or radio button Input and its associated text label. The jQuery wrapper is extended with a disable- and enable method that will not only enable/disable the button but also the label – as you can see in the screenshot from one of my apps. 
If the wrapped control is a check button then the native jQuery val()  method is overwritten to set/get true/false values both reflecting and setting the checked state.

 

Let’s play a typical scenario for a checkbox like this:

<label for="chk">Thirsty ?</label><input type="checkbox" id="chk" />

 

Assume that you want to uncheck the button, disable it, and change the text of the Label:

with the Checkbox plugin this is a one-liner:

// Create a Checkbox object

var jCheck= $("#chk").Checkbox();

jCheck.uncheck().disable().label.text("Drunk!");

 

// Read the state of our Checkbox

var IsFilled = jCheck.checked();

 

// You can also use the val() method to set/get the checked state

var IsFilled = jCheck.val();

 

// Set the checked state of our Checkbox

jCheck.checked( bIsSober );

 

Same applies to a Radio Button,  although a single Radio Buttons doesn’t make a lot of sense.
If you want to work with Grouped check- or radio buttons then we use the second plugin:


$.fn.ButtonGroup extends a jQuery container object ( usually a table or fieldset ) that wraps a couple of radio- or checkbox buttons together with their associated labels.  The ButtonGroup then allows you to easily set/get a Radio group's value,  disable- or enable the complete Group (including labels) or only selected buttons. Internally the ButtonGroup is no more than a list of $.fn.Checkbox objects that wrap the check or radio buttons and some code to bring it all together. The modified get() method returns such an extended button object that also  'understands' checked/enable/disable messages.

By default the control expects and returns integer values. If no button is selected at all then

ButtonGroup.val() will return a Zero ( or –1, if Zero is a valid value for one of the Buttons) . These values can be overwritten by an options object passed as a constructor parameter as usual for many jQuery plugins.

 

Lets create a little button group:

<table id="tbGroup">
    <tr>
        <td><input type="radio" id="rad0" name="radCity" value="1" /></td>
        <td><label for="rad0">German citizen by birth</label></td>
    </tr>                
    <tr>
        <td><input type="radio" id="rad1" name="radCity" value="2" /></td>
        <td><label for="rad1">Acquired German citizenship:</label></td>
    </tr>                
    <tr>
        <td><input type="radio" id="rad2" name="radCity" value="3" /></td>
        <td><label for="rad2">Not a German citizen</label></td>
    </tr>                
</table>

Nothing unusual so far, three Radio buttons ( could be Check buttons as well ) grouped together with a common name property “radCity”.  In this case we use a Table to give our buttons a container ( and proper layout ), but you can also use a div-tag or whatever tags you prefer – this container will  the prime candidate for our ButtonGroup:

 

Using the ButtonGroup Control:

// Create the Radio ButtonGroup var jGroup = $("#tbGroup").ButtonGroup();

 

jGroup.disable(0); // Disable the first Button

jGroup.disable(0,2); // Disable Buttons 0 and 2

jGroup.val("1"); // Set a value and so select button 0

 

var IDRadio = jGroup.val().toInt(); // read the radio group value .

 

jGroup.get(0); // returns first button object

jGroup.get(1,2); // returns Array with button 1 and 2

jGroup.get("checked"); // returns selected Radio Button

 

 

// Disable all buttons, remove selection, enable one button and select it

if ($Controls.chkNoRelatives.checked()) {
    $Controls.tbGroup.disable().uncheck().get("rad1").enable().checked(true);
};

 

 

This short example might give you an impression about the power and simplicity of this plugin, imagine you’d have to code the last example by hand ! Please visit the ButtonGroup Live Demo Page  for a short demonstration of Radio- and Checkbox Groups.  Comments and Improvements appreciated !


Resources: