hacer checkbox dinamico y el script tambien dinamico ?

anibal_cdf · #1 (**permalink**) 05/12/2007, 18:16

tengo este scritp de prueba con 5 checks, pero lo tengo q hacer con 38 ... la idea seria que donde dice a= casilla.form ..... sea en realidad dinamico para no usar 38 variables
y despues en el contador tampoco usar 38 comparaciones ...

alguna idea ?

Código:

<html>

<head>

<title>Loto Test</title>

<p align="center"><b>Cambia celda de color al seleccionar checkbox, y limita a 3 las selecciones</b></p>

<style type=text/css>

body {color:blue;background-color:green;}

.ts {color:hotpink;background-color:white;}

</style>



</head>

<body style="color: #000000; background-color: #FFFFFF">


<script>

isIE=document.all?true:false;

var isNS4=document.layers?true:false;

var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;

var bC=new Array('pink','white');

var C=new Array('black','hotpink');

 

function doIt(_v,casilla,form)

{

 

            a = casilla.form.c1.checked;

            b = casilla.form.c2.checked;

            c = casilla.form.c3.checked;

            d = casilla.form.c4.checked;

            e = casilla.form.c5.checked;

 

contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0) + (d ? 1 : 0) + (e ? 1 : 0);

 

    if (contador > 3)

 

    {

    alert("Solo puedes seleccionar 3 opciones");

    casilla.checked = false;

    }

 

  var X=eval("document.exf1.c"+_v+".checked?0:1");

  if(isIE)

  {

    eval("t"+_v+".style.backgroundColor=bC[X]");

    eval("t"+_v+".style.color=C[X]");

  }

  if(isNS6)

  {

    document.getElementById("t"+_v).style.backgroundColor=bC[X];

    document.getElementById("t"+_v).style.color=C[X];

  }

} 

           

</script>



Por favor, seleccione 3 opciones como mÃ¡ximo:<br>

<form name=exf1>

 

<table border=1 cellpadding=3 cellspacing=3 align=center>

<tr><td class=ts id=t1>01<input type=checkbox name="c1" onclick=doIt(1,this,this.form) value="ON">
  <td class=ts id=t2>02
    <input type=checkbox name="c2" onclick=doIt(2,this,this.form) value="ON">
  <td class=ts id=t3>03
    <input type=checkbox name="c3" onclick=doIt(3,this,this.form) value="ON">
  <td class=ts id=t4>04
    <input type=checkbox name="c4" onclick=doIt(4,this,this.form) value="ON">
  <td class=ts id=t5>05
    <input type=checkbox name="c5" onclick=doIt(5,this,this.form) value="ON">
  <td class=ts id=t1>  
  <td class=ts id=t1></tr>

<tr>
  <td class=ts id=t2>
  
  <td class=ts id=t2>
  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2></tr>

<tr>
  <td class=ts id=t3>
  
  <td class=ts id=t3>
  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3></tr>

<tr>
  <td class=ts id=t4>
  
  <td class=ts id=t4>
  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4></tr>

<tr>
  <td class=ts id=t5>
  
  <td class=ts id=t5>
  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5></tr>
<tr>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6></tr>
<tr>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7></tr>
</table>

</form>

 

 

</body>

 

</html>

Panino5001 · #2 (**permalink**) 05/12/2007, 18:53

Fijate si esto te sirve:

Código PHP:

  <html>

<head>

<title>Loto Test</title>

<p align="center"><b>Cambia celda de color al seleccionar checkbox, y limita a 3 las selecciones</b></p>

<style type=text/css>

body {color:blue;background-color:green;}

.ts {color:hotpink;background-color:white;}

</style>

<script>
function pintar(e){
e=e || window.event;
o= e.srcElement || e.target;
colores=['pink','white'];
color=o.checked?colores[0]:colores[1];
au=document.getElementsByTagName('input');
for(i=0,j=0;i<au.length;i++){
if(au[i].type!='checkbox')continue;
if(au[i].checked==true)j++;
if(j>3){
alert('no más de 3');
o.checked=false;
return;
}
}
o.parentNode.style.backgroundColor=color;
}
function evaluar(obj){
obj.onclick=function(event){
pintar(event);
}
}
window.onload=function(){
au=document.getElementsByTagName('input');
for(i=0;i<au.length;i++){
if(au[i].type!='checkbox')continue;
evaluar(au[i])
}
}
</script>

</head>

<body style="color: #000000; background-color: #FFFFFF">






Por favor, seleccione 3 opciones como m&aacute;ximo:<br>

<form name=exf1>

 

<table border=1 cellpadding=3 cellspacing=3 align=center>

<tr><td class=ts id=t1>01<input type=checkbox name="c1" value="ON">
  <td class=ts id=t2>02
    <input type=checkbox name="c2"  value="ON">
  <td class=ts id=t3>03
    <input type=checkbox name="c3"  value="ON">
  <td class=ts id=t4>04
    <input type=checkbox name="c4"  value="ON">
  <td class=ts id=t5>05
    <input type=checkbox name="c5"  value="ON">
  <td class=ts id=t1>  
  <td class=ts id=t1></tr>

<tr>
  <td class=ts id=t2>
  
  <td class=ts id=t2>
  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2>  
  <td class=ts id=t2></tr>

<tr>
  <td class=ts id=t3>
  
  <td class=ts id=t3>
  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3>  
  <td class=ts id=t3></tr>

<tr>
  <td class=ts id=t4>
  
  <td class=ts id=t4>
  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4>  
  <td class=ts id=t4></tr>

<tr>
  <td class=ts id=t5>
  
  <td class=ts id=t5>
  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5>  
  <td class=ts id=t5></tr>
<tr>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6>
  <td class=ts id=t6></tr>
<tr>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7>
  <td class=ts id=t7></tr>
</table>

</form>

 

 

</body>

 

</html>

anibal_cdf · #3 (**permalink**) 05/12/2007, 19:07

IDOLOOOOOOOOOOOO

funciona 100 puntos !
si no es mucha molestia podrias explicarme un poco como trabaja ?

Panino5001 · #4 (**permalink**) 05/12/2007, 19:14

Me recordó un viejo teorema:

Código PHP:

  <html>

<head>

<title>Presupuesto</title>
<script>
function pintar(e){
e=e || window.event;
o= e.srcElement || e.target;
colores=['orange','white'];
color=o.checked?colores[0]:colores[1];
au=document.getElementsByTagName('input');
for(i=0,j=0;i<au.length;i++){
if(au[i].type!='checkbox')continue;
if(au[i].checked==true)j++;
if(j>2){
alert('no más de 2');
o.checked=false;
return;
}
}
o.parentNode.parentNode.style.backgroundColor=color;
}
function evaluar(obj){
obj.onclick=function(event){
pintar(event);
}
}
window.onload=function(){
au=document.getElementsByTagName('input');
for(i=0;i<au.length;i++){
if(au[i].type!='checkbox')continue;
evaluar(au[i])
}
}
</script>

</head>

<body>






<h1>Por favor, seleccione 2 opciones como m&aacute;ximo:</h1>

<form name="pepe">
  <table border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td><input type="checkbox" name="checkbox" value="checkbox"></td>
      <td>BUENO</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" value="checkbox"></td>
      <td>BARATO</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox3" value="checkbox"></td>
      <td>RAPIDO</td>
    </tr>
  </table>
</form>
</body>
</html>

Panino5001 · #5 (**permalink**) 05/12/2007, 19:19

Va la explicación: cuando carga la página (window.onload), se buscan los checkboxes y se les asigna la función pintar al evento onclick de los checkboxes. La función pintar verifica si está chequeado o no y cuantos hay checkeados. Si hay más de tres, se detiene, previo descheckeo y despintado, si no, lo pinta (pinta a su nodo padre, que es td)

anibal_cdf · #6 (**permalink**) 06/12/2007, 05:39

con el windows.load ahi es como que contas cuantos checkbox hay ?
como haces para que sea "dinamico" ?
porque yo se programar en php pero no entendi bien el manejo este del javascript ...

anibal_cdf · #7 (**permalink**) 06/12/2007, 08:40

panino, ejecutandolo en explorer da un error
linea 27 caracter 1 , target no valido

Panino5001 · #8 (**permalink**) 06/12/2007, 11:28

Hola, para que sea dinámico no tengo en cuenta los nombres ni los ids, sólo que sean checkboxes, para eso rescato con document.getElementsByTagName('input') y verifico que el type sea checkbox.
Acabo de probarlo en Firefox, en explorer 5 y 7, y en Ópera y va bien en todos.
Asegurate de no haber omitido alguna línea.

anibal_cdf · #9 (**permalink**) 06/12/2007, 11:47

gracias, si algo raro paso, ahi lo hice de nuevo y funciona bien, muchisimas gracias !!!!!!!