El checkbox en Jquery Mobile

Otro elemento importante es el input checkbox, con Jquery Mobile es muy sencillo estilizarlo, basta con incluirlo como lo haríamos habitualmente y añadirle algún que otro atributo.

Veamos un checkbox simple ...

<form>
<label>
<input name="checkbox" type="checkbox">Click sobre mi
</label>
</form>

Veamos un checkbox con las dimensiones reducidas, para ello usaremos el atributo data-mini="true" 

<form>
<label>
<input name="checkbox" data-mini="true" type="checkbox">Click sobre mi
</label>
</form>

Ahora veamos un grupo de checkbox en vertical, para ello utilizaremos unas etiquetas fieldset con el atributo data-role="controlgroup" y el atributo data-type="vertical"

<form>
<fieldset data-role="controlgroup" data-type="vertical">
<legend>Vertical:</legend>
<input name="checkbox-1" id="checkbox-1" type="checkbox">
<label for="checkbox-1">Uno</label>
<input name="checkbox-2" id="checkbox-2" type="checkbox">
<label for="checkbox-2">Dos</label>
<input name="checkbox-3" id="checkbox-3" type="checkbox">
<label for="checkbox-3">Tres</label>
</fieldset>
</form>

Ahora un controlgroup en horizontal ...

<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-1" id="checkbox-1" type="checkbox">
<label for="checkbox-1">Uno</label>
<input name="checkbox-2" id="checkbox-2" type="checkbox">
<label for="checkbox-2">Dos</label>
<input name="checkbox-3" id="checkbox-3" type="checkbox">
<label for="checkbox-3">Tres</label>
</fieldset>
</form>

Ahora posicionamos el icono de los checkboxes a la derecha a través del parámetro data-iconpos="right" y le aplicamos nuevos temas a través de data-theme ...

<form>
<fieldset data-role="controlgroup" data-type="vertical" data-iconpos="right">
<input name="checkbox-1" id="checkbox-1" data-theme="a" type="checkbox">
<label for="checkbox-1">Uno</label>
<input name="checkbox-2" id="checkbox-2" data-theme="b" type="checkbox">
<label for="checkbox-2">Dos</label>
<input name="checkbox-3" id="checkbox-3" data-theme="e" type="checkbox">
<label for="checkbox-3">Tres</label>
</fieldset>
</form>