He preparado la típica funcionalidad en la que al seleccionar un campo INPUT
de tipo checkbox se seleccionan otros campos asociados a él.
Este sería el HTML:
<ul class="clear">
<li class="superior">
<label for="c_1"><input type="checkbox" id="c_1" class="superior" /><span>Opción 1</span></label>
<ul class="inferior">
<li><label for="c_1_1"><input type="checkbox" id="c_1_1" /><span>Opción 1.1</span></label></li>
<li><label for="c_1_2"><input type="checkbox" id="c_1_2" /><span>Opción 1.2</span></label></li>
</ul>
</li>
<li class="superior">
<label for="c_2"><input type="checkbox" id="c_2" class="superior" /><span>Opción 2</span></label>
<ul class="inferior">
<li><label for="c_2_1"><input type="checkbox" id="c_2_1" /><span>Opción 2.1</span></label></li>
[...]
</ul>
</li>
<li class="superior">
<label for="c_3"><input type="checkbox" id="c_3" class="superior" /><span>Opción 3</span></label>
<ul class="inferior">
<li><label for="c_3_1"><input type="checkbox" id="c_3_1" /><span>Opción 3.1</span></label></li>
[...]
</ul>
</li>
<li class="superior">
<label for="c_4"><input type="checkbox" id="c_4" class="superior" /><span>Opción 4</span></label>
<ul class="inferior">
<li><label for="c_4_1"><input type="checkbox" id="c_4_1" /><span>Opción 4.1</span></label></li>
[...]
</ul>
</li>
</ul>
Este el JS para llamar al plugin de jQuery:
jQuery('input.superior').each(function () {
jQuery(this).chequearCampos();
});
Y este el JS del plugin de jQuery:
(function($){
$.fn.chequearCampos = function(options){
var op = {
campo: 'input[type="checkbox"]'
}
var datos = {
campoInicial: '',
campos: ''
}
var options = $.extend(op, options);
return this.each(function(){
datos.campoInicial = $(this);
datos.campos = datos.campoInicial.parent().next().contents().find(op.campo);
datos.campos.click(alternarInicial);
datos.campoInicial.click(alternar);
});
function alternarInicial () {
var num = datos.campos.length;
var i=0; var j=0; while (i<num) {
if (datos.campos.eq(i).attr('checked')==true) {j++;}
i++;
}
if (j==num) {
datos.campoInicial.attr('checked',true);
} else {
datos.campoInicial.attr('checked',false);
}
}
function alternar () {
if (datos.campoInicial.attr('checked')==false) {
datos.campos.attr('checked',false);
} else {
datos.campos.attr('checked',true);
}
}
}})(jQuery);