Radio Buttons

jQuery UI can manage radio buttons so that they have the appearance of the buttons above.

Displaying Radio Buttons

The HTML code you write for this is somewhat less flexible than the code used so far. We must only use an <input> element to represent a radio button, in which the text associated with the radio button will take the form of a <label> tag.

For example, to display two radio buttons to choose the sex of a person, as shown in Figures 5-5 and 5-6, we write the HTML code as follows:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

Sex : <input type=radio name=sex id=m><label for=m>Male</label></input>
       <input type=radio name=sex id=f><label for=f>Female</label></input>

<script>

$("input").button ();

</script>

Notice the use of the for attribute in the <label> tag to associate the text with the radio button. If you forget to add this part, the selection and deselection of the buttons no longer takes place.

Radio buttons, where neither is selected

Figure 5-5. Radio buttons, where neither is selected

Radio buttons, where Male is selected

Figure 5-6. Radio buttons, where Male is selected

Improving the Display with buttonset ()

The radio buttons shown in Figures 5-5 and 5-6, are certainly more ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.