Nothing frustrates me more than having to hone in my mouse pointer on a tiny radio button. That’s why many web forms today are allowing the area around the radio button to be clickable. I personally believe that if a radio button and its label is isolated in its own td or div tag the entire div or td should be clickable. A more common approach to this issue is making the label clickable.
Let’s take this example
The idea is that when a user clicks ’1 to 24′ the first radio button is selected, when ’25 to 99′ is clicked the second radio button is selected, and so on. As usual to pull this off we need three resources: some HTML, CSS, and javascript (jQuery since we want this to be easy, right!).
The HTML
The following code would of course need to be embedded in a form tag and so on, but we’re just going to to look at the code that will recreate the image above.
name=”visitsPerDay”
value=”1 to 24″>
<span class=”textClick” id=”1 to 24″>1 to 24</span>
<cfinput type=”radio”
name=”visitsPerDay”
value=”25 to 99″>
<span class=”textClick” id=”25 to 99″>25 to 99</span>
<cfinput type=”radio”
name=”visitsPerDay”
value=”100 to 499″
checked=”yes”>
<span class=”textClick” id=”100 to 499″>100 to 499</span>
<cfinput type=”radio”
name=”visitsPerDay”
value=”500 plus”>
<span class=”textClick” id=”500 plus”>500 +</span>
We simply have here four radio buttons, all with the same name (this makes them a set) with their independent values and their labels. Notice though that the labels are wrapped in span tags. Each span tag has a class of ‘textClick’ and an id that matches the value of the radio button it is labeling. For example, the fourth radio button that has a value of ’500 plus’ has a label wrapped in a span tag that has an id of ’500 plus’.
The CSS
cursor: default;
}
Not much going on here, and honestly it’s not even necessary. By default when a user rolls over HTML text their cursor turns into the little typer icon. Since we are clicking this text we want an icon that is more appropriate to clicking. You could choose the pointer to get the little hand, but I prefer to keep it simple and just stick with the arrow icon. To get this just set a ‘cursor’ rule to ‘default’. Now anything we hover over that has a class of ‘textClick’ will have a standard cursor. Now we have all our elements set up and in place, so let’s make it work with jQuery.
Bringing it all together (the jQuery)
{
$(“.textClick”).click(function()
{
//get the id of what was just clicked.
//This is the value of the radio button that we need to select
var id = this.id;
//as long as we wrap our clickable text in a span tag that
//has a class of ‘textClick’ and an id with the value of the
//radio button that it needs to select we only need this statement.
$(“input[value=" + id + "]“).attr(“checked”, true);
});
});
That’s it. Two lines of code really. First we need to run this only after the page has loaded, so we’ll use jQuery’s handy-dandy ‘document.ready’ method. Inside of this method we use jquery to select everything that has a class of ‘textClick’ and add a click listener to it. This means that any time something with the ‘textClick’ class applied to it is clicked we can do something. What we’re going to do here is select the radio button that the text is associated with.
If you remember we gave our span tags an id of the value of the radio button it is associated with. This is how we know which radio button needs to be selected when certain text is clicked. Let’s get the id of what was clicked. A simple ‘this.id’ should do the trick. Now we not only know the id of what we clicked but we also know the value of the radio button that needs to be selected. Use jQuery to select the radio button that has that value. This is the ‘$(“input[value=" + id + "]“)’ piece of code. We find an input field that has a value equal to the id of the text we selected and then we set the checked attribute to true. That’s it. This piece of code will work if you have one set of radio buttons or a thousand sets.
nice article. Thanks