limitar cantidad de checkbox a tildar ?

anibal_cdf · #1 (**permalink**) 04/12/2007, 11:23

buenas que tal, tengo este script el cual quisiera si me pueden ayudar a que al marcarlo (ademas de pintarlo de color) me valide una cantidad maxima de items a tildar

por ejemplo si yo pongo maximo 3, que cuando quiera tildar el 4to no me lo tilde y ademas tampoco me cambie el color del fondo

este es el codigo q tengo ahora

Código:

<html>
<head>
<title>Cambia celda de color al seleccionar checkbox</title>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
100s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - http://www.js-examples.com/ 
-->
<p align="center"><b>Cambia celda de color al seleccionar checkbox
<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)
{
  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>
</b></p>
<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) value="ON"></tr>
<tr><td class=ts id=t2>02<input type=checkbox name=c2 onclick=doIt(2) value="ON"></tr>
<tr><td class=ts id=t3>03<input type=checkbox name=c3 onclick=doIt(3) value="ON"></tr>
<tr><td class=ts id=t4>04<input type=checkbox name=c4 onclick=doIt(4) value="ON"></tr>
<tr><td class=ts id=t5>05<input type=checkbox name=c5 onclick=doIt(5) value="ON"></tr>
</table>
</form>

</body>
</html>

JavierB · #2 (**permalink**) 04/12/2007, 12:07

Hola anibal_cdf

A ver si este mensaje te sirve de ayuda:

http://www.forosdelweb.com/f13/conta...onados-431687/

Saludos,

anibal_cdf · #3 (**permalink**) 04/12/2007, 12:24

gracias javi, pero no se bien como meterlo dentro del que ya esta para q me haga las 2 cosas

hgp147 · #4 (**permalink**) 04/12/2007, 12:34

Hola anibal_cdf, proba con este código.

Código HTML:

<script language="javascript">

function limitarSelección(casilla,form)

{
a = casilla.form.casilla1[0].checked;
b = casilla.form.casilla1[1].checked;
c = casilla.form.casilla1[2].checked;
d = casilla.form.casilla1[3].checked;
e = casilla.form.casilla1[4].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;
    }
}
</script>

 

<form name="ejemplo11" method="GET" action="pagina.htm" target="_blank">

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

<input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSelección(this,this.form)">Opción 1<br>

<input type="checkbox" name="casilla1"  value="Opcion 2" onClick="limitarSelección(this,this.form)">Opción 2<br>

<input type="checkbox" name="casilla1"  value="Opcion 3" onClick="limitarSelección(this,this.form)">Opción 3<br>

<input type="checkbox" name="casilla1"  value="Opcion 4" onClick="limitarSelección(this,this.form)">Opción 4<br>

<input type="checkbox" name="casilla1"  value="Opcion 5" onClick="limitarSelección(this,this.form)">Opción 5<br>

<input type="submit" value="Enviar">

</form>

Lo saque de esta web: http://www.desarrolloweb.com/articulos/1507.php

anibal_cdf · #5 (**permalink**) 04/12/2007, 19:54

no me sale, pruebo esto y funciona q no me deje marcar mas de 3 pero no me pinta el fondo de color al seleccionarlo

Código:

<html>
<head>
<title>Cambia celda de color al seleccionar checkbox</title>
<p align="center"><b>Cambia celda de color al seleccionar checkbox
<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 language="javascript">

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 limitarSelección(casilla,form)

{

a = casilla.form.casilla1[0].checked;
b = casilla.form.casilla1[1].checked;
c = casilla.form.casilla1[2].checked;
d = casilla.form.casilla1[3].checked;
e = casilla.form.casilla1[4].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;
    }
    else
    {
    var X=eval("document.exf1.c"+_v+".checked?0:1");
      if(isIE)
        {
            eval("t"+casilla+".style.backgroundColor=bC[X]");
            eval("t"+casilla+".style.color=C[X]");
        }
        if(isNS6)
        {
            document.getElementById("t"+casilla).style.backgroundColor=bC[X];
            document.getElementById("t"+casilla).style.color=C[X];
        }    
    }
}
</script>

 

<form name="ejemplo11" method="GET" action="pagina.htm" target="_blank">

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

<input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSelección(this,this.form)">Opción 1<br>

<input type="checkbox" name="casilla1"  value="Opcion 2" onClick="limitarSelección(this,this.form)">Opción 2<br>

<input type="checkbox" name="casilla1"  value="Opcion 3" onClick="limitarSelección(this,this.form)">Opción 3<br>

<input type="checkbox" name="casilla1"  value="Opcion 4" onClick="limitarSelección(this,this.form)">Opción 4<br>

<input type="checkbox" name="casilla1"  value="Opcion 5" onClick="limitarSelección(this,this.form)">Opción 5<br>

<input type="submit" value="Enviar">

</form>

</body>
</html>

anibal_cdf · #6 (**permalink**) 05/12/2007, 07:51

alguna sugerencia ?

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

bueno, lo pude hacer, aca comparto el codigo:

Código:

<html>

<head>

<title>Cambia celda de color al seleccionar checkbox</title>

<p align="center"><b>Cambia celda de color al seleccionar checkbox

<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>

</b></p>

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"></tr>
<tr><td class=ts id=t2>02<input type=checkbox name="c2" onclick=doIt(2,this,this.form) value="ON"></tr>

<tr><td class=ts id=t3>03<input type=checkbox name="c3" onclick=doIt(3,this,this.form) value="ON"></tr>

<tr><td class=ts id=t4>04<input type=checkbox name="c4" onclick=doIt(4,this,this.form) value="ON"></tr>

<tr><td class=ts id=t5>05<input type=checkbox name="c5" onclick=doIt(5,this,this.form) value="ON"></tr>

</table>

</form>

</body>

</html>