Hola,
Me surgio la necesidad de hacer un pequeño script para hacer algo asi como una especie 'Radio Tree' donde los radios se van habilitando/deshabilitando deacuerdo a los que vayamos chekando.
Y pues tras un rato me hize este script:
Código:
<script type="text/javascript">
/*Variables que dependen de tu forma de generar los raidos */
var namePrefix = 'gen' //Aqui va algun prefijo que uses para generar los botones, ej, MyBtn, Gen, etc;
var FormName = '' //Nombre del form donde se encuentran los radios, dejarlo vacio para manipular todos los radios
/******************************************/
function init(){ //Desabilita todos los radios exepto los principales
resetRadios();
}
function resetRadios(exname){
//Obtenemos los radios ya sea del form especificado o de todo el documento
if(!FormName)
elementos = document.getElementsByTagName('input');
else
elementos = document.forms[FormName].elements;
//Nuevo array para meter los radios
var fullradio = [];
//En caso de omitir el argumento..
if(!exname)
exname = [];
//Label a for, este recorre todo los inputs en busca de radios con prefijos y los añade al array fullradio
out:
for(var j = 0; j < elementos.length; j++){
if(elementos[j].type == 'radio'){ //Checamos que el elemento sea un radio, si no lo es continuamos con el siguiente input
for(var d = 0; d < exname.length;d++){ //Recorremos el array devuelto por CreateArray en el nombre del input para buscar coincidencias
if(elementos[j].name == exname[d]){ //Si encontramos una coincidencia...
if(elementos[j].id.indexOf('Activer') != -1) //Si es un radio principal..
continue out; //Entonces lo ignoramos
elementos[j].onclick = radio; //Si no es un radio principal, añadimos un manejador de evento y seguimos con el siguiente input
continue out;
}
}
//Si no encontramos coincidencias entonces...
if(elementos[j].name.indexOf(namePrefix) != -1 ) //Filtramos los radios que tienen prefijo
fullradio.push(elementos[j]); //Añadimos al array los radios a desactivar
}
}
if(fullradio.length == 0) //Si no obtubimos ningun radio a desactivar, regresamos
return;
//Desactivamos todos los radios dentro del array fullradio
for(var i = 0;i < fullradio.length; i++){
fullradio[i].setAttribute('disabled','disabled'); //Disable All
fullradio[i].checked = false; //Uncheck All
}
}
//Esta funcion es llamada al cambiar un radio Activer
function radio(radio){
//Si radio es un evento (onclick)
if(radio.type == 'click'){
//Crea un array con todos los padres del radio que llamo a la funcion y desabilita los radios fuera del arbol
resetRadios(createArray(this))
} else if (radio.type == 'radio'){ //Si es un radio principal
//Crear un array con todos los padres del radio y desabilita los radios fuera del arbol
resetRadios(createArray(radio));
ActiverPos = radio.id.indexOf('Activer') //Obtenemos la posicion donde termina el name de los radios a manipular
var radiosName = radio.id.substring(0,ActiverPos); //Obtenemos el nombre de los radios a manipular
var radios = document.getElementsByName(radiosName); //Obtenemos los radios a manipular
for(var i = 0;i < radios.length; i++){
if(radios[i].type == 'radio') //Nos sercioramos de que el elemento obtenido sea un radio
radios[i].removeAttribute('disabled'); //Activamos los radios que sean necesarios
}
}
}
//Funcion de utileria que crea un array con los nombres del radio pasado y los padres del mismo
function createArray(radio){
//Si es un radio de primer nivel
if(radio.name.indexOf(namePrefix) == -1)
return [radio.name] //El array tendra solo 1 valor
var inicio = radio.name.substring(namePrefix.length); //Obtenemos una cadena de numeros que indican la anidacion del radio i.e(1,11,112,1121,etc)
var nums = inicio.split(""); //Creamos un array con esos numeros
var array = []
if(isNaN(nums[0])) //Si el primer elemento del array no es un numero el script deja de funcionar
return []; //Posible causa: Se ha colocado mal le prefijo en el name del los radio
for(var k = 0, holder = ""; k < nums.length; k++){ //Añadimos a nuestro array de salida todos los padres hasta llegar al tope
holder+= nums[k];
array.push(namePrefix+holder)
}
return array; //Mandamos nuestro array
}
</script>
Bueno queria ver su opinion en cuanto a sintaxis y forma de uso se refiere, el script es simple lee los valores de los radio buttons y me permpite implementar el arbol que comentaba, el html necesario vendria siendo algo asi:
Código HTML:
<input type="radio" name="xxx" id="gen2Activer" value="CualquierValor" onclick="radio(this);" />Color
<input type="radio" name="gen2" id="gen21Activer" value="CualquierValor" onclick="radio(this)" />Rojo
<input type="radio" name="gen21" value="CualquierValor" />Rojo Bajo
<input type="radio" name="gen2" value="CualquierValor" />Azul
<input type="radio" name="xxx" id="gen1Activer" value="CualquierValor" onclick="radio(this);"/>Opciones
<input type="radio" name="gen1" value="CualquierValor" />Opt1
<input type="radio" name="gen1" value="CualquierValor" />Opt2
La anidacion es infinita. Creo que consume muchos recursos, alguna manera alternativa/consejo ?
Gracias espero comentarios