Checkbox and radio button widgets

Checkbox and radio button widgets

by firegroove

HTML

<fieldset data-role="controlgroup">
	<legend>Choose a pet:</legend>
     	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
     	<label for="radio-choice-1">Cat</label>

     	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
     	<label for="radio-choice-2">Dog</label>

     	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
     	<label for="radio-choice-3">Hamster</label>

     	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
     	<label for="radio-choice-4">Lizard</label>
</fieldset>






<div data-role="fieldcontain">
    <fieldset data-role="horizontal">
    	<legend>Choose a pet:</legend>
         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
         	<label for="radio-choice-1">Cat</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
         	<label for="radio-choice-2">Dog</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
         	<label for="radio-choice-3">Hamster</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
         	<label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 100%;
}

JavaScript

$(function() {
    $("input").checkboxradio();
  });


$(".js-demo-1").find("input").ionCheckRadio();