Crear listas a partir de elementos checkbox con jmklist

Descripción

jmklist sirve para crear una lista sobre un campo de un formulario a partir de los valores de uno o varios checkboxes y su estado. Se trata de un script escrito en javascript de forma no intrusiva y que hace uso de jQuery.

Uso

Para usar jmklist basta con incluir el script y crear los correspondientes checkboxes y campo de destino de la lista que se generará al marcar uno o varios de estos checkboxes. Los checkboxes que queramos que participen en la creación de la lista tienen que pertenecer a la clase "checkbox_jmklist". El campo objetivo, por ejemplo un type="hidden" o type="text", tiene que pertenecer a la clase "hidden_jmklist".

Demostración

Conjunto de checkbox con la clase "checkbox_jmklist":

Campo "input" donde se almacenará el resultado, con la clase "hidden_jmklist":

Resultado:

Código fuente del ejemplo

<script src="/jmklist-1.0.js " type="text/javascript"></script>

<script src="/javascripts/jquery.js" type="text/javascript"></script>

<p><strong>Conjunto de checkbox con la clase "checkbox_jmklist:"</strong></p>

<table style="margin: 10px 0px 0px 20px; width: 80%;" border="0">
<tbody>
<tr>
<td><input id="categorias_1" class="checkbox_jmklist" name="categorias[1]" type="checkbox" value="1" /><input name="categorias[1]" type="hidden" value="0" />Categor&iacute;a 1</td>
<td><input id="categorias_2" class="checkbox_jmklist" name="categorias[2]" type="checkbox" value="2" /><input name="categorias[2]" type="hidden" value="0" />Categor&iacute;a 2</td>
<td><input id="categorias_3" class="checkbox_jmklist" name="categorias[3]" type="checkbox" value="3" /><input name="categorias[3]" type="hidden" value="0" />Categor&iacute;a 3<br /></td>
</tr>
<tr>
<td><input id="categorias_4" class="checkbox_jmklist" name="categorias[4]" type="checkbox" value="4" /><input name="categorias[4]" type="hidden" value="0" />Categor&iacute;a 4</td>
<td><input id="categorias_5" class="checkbox_jmklist" name="categorias[5]" type="checkbox" value="5" /><input name="categorias[5]" type="hidden" value="0" />Categor&iacute;a 5</td>
<td><input id="categorias_6" class="checkbox_jmklist" name="categorias[6]" type="checkbox" value="6" /><input name="categorias[6]" type="hidden" value="0" />Categor&iacute;a 6</td>
</tr>
<tr>
<td><input id="categorias_7" class="checkbox_jmklist" name="categorias[7]" type="checkbox" value="7" /><input name="categorias[7]" type="hidden" value="0" />Categor&iacute;a 7</td>
<td><input id="categorias_8" class="checkbox_jmklist" name="categorias[8]" type="checkbox" value="8" /><input name="categorias[8]" type="hidden" value="0" />Categor&iacute;a 8</td>
<td><input id="categorias_9" class="checkbox_jmklist" name="categorias[9]" type="checkbox" value="9" /><input name="categorias[9]" type="hidden" value="0" />Categor&iacute;a 9</td>
</tr>
</tbody>
</table>

<p><strong><br /></strong></p>
<p><strong>Campo "input" donde se almacenar&aacute; el resultado, con la clase "hidden_jmklist"</strong></p>
<p><strong><strong>Resultado: </strong><input class="hidden_jmklist" name="resultado" type="text_field" /></strong></p>

Descarga

jmklist 1.0

jQuery (Requerido por jmklist)