Checkboxes

The appearance of the checkboxes is the same as radio buttons, but it is possible to select and deselect each checkbox independently (see Figure 5-8).

Checkboxes with two buttons selected

Figure 5-8. Checkboxes with two buttons selected

Displaying Checkboxes

To display the checkboxes, change the type attribute of <input> elements, replacing radio with checkbox:

<!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 />
<p>Select the colors that you like:</p>
<input type=checkbox name=red id=idred><label for=idred>Red</label></input>
<input type=checkbox name=green id=idgreen><label for=idgreen>Green</label></input>
<input type=checkbox name=blue id=idblue><label for=idblue>Blue</label></input>
<input type=checkbox name=yellow id=idyellow><label for=idyellow>Yellow</label></input>
<script>
$("input").button ();
</script>

Improving the Display with buttonset ()

We can also improve the display by combining checkboxes into a block:

<!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 /> <p>Select the colors that you like:</p> <div> <input type=checkbox name=red id=idred><label for=idred>Red</label></input> <input ...

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.