Seleccionar/Deseleccionar checkbox con un click y bloquear otros checkbox

Geze · #1 (**permalink**) 13/06/2011, 20:29

Antes de empezar aclaro que ya hay muchos temas sobre "cómo seleccionar todos los checkbox de un formulario", pero este tema incluye otras dudas que no he visto en esos temas y me gustaría me ayudaran.

Necesito que la dar click en un checkbox se seleccionen sólo unos cuantos checkbox's y no todos los del formulario; que se bloqueén todos esos selccionados (disabled) exepto el que selecciona a todos. Y que con ese mismo checkbox que marcó todas las casillas al dar click de nuevo se deseleccionen y se activen todoas los checkbox's de nuevo; ya que en los temas que he visto se selecciona y deselecciona con dos botones distintos.
¿cómo puedo hacer una función para esto?
Gracias y un saludo :)

quimfv · #2 (**permalink**) 14/06/2011, 01:50

Si tienes las funciones que dices, digamos seleccionarTodos() y desSeleccionarTodos() y funcionan asociadas a dos botones, debes tomarlas de ejemplo y asociaciarlas al checkbox pero con un condicional que ejecute una u otra en funcion de si el checkbox esta o no seleccionado.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function selODessel(obj){
if(obj.checked){
    seleccionarTodos();
}else{
    desSeleccionarTodos();
}
}
 
function seleccionarTodos(){
alert("Selecciono todos")
}
function desSeleccionarTodos(){
alert("Desselecciono todos")
}
 
</script>
</head>
<body>
<input name="chec" type="checkbox" value="" onClick="selODessel(this)" >
</body>
</html>

como puedes ver un mismo objeto ejecuta una u otra funcion en funcion de su estado.

Geze · #3 (**permalink**) 14/06/2011, 10:21

Disculpa, no entendí, ¿podrías colocarlo en un ejemplo? Por favor; aún soy nuevo en JS

juan24_14 · #4 (**permalink**) 14/06/2011, 13:31

mira tengo este ejemplo que hice hace un tiempo no se sio te sirva cual quier cosa me comentas.
<input type="radio" name="discapacidad" value="Discapacidad Total" id="discapacidad_0" onclick="makeEnable3 ()"/>

function makeEnable3 (){
var a=document.getElementById ( "baston_0" )
a.disabled= false
var b=document.getElementById ( "baston_1" )
b.disabled= false
var c=document.getElementById ( "lentes_0" )
c.disabled= true
c.checked=false
var d=document.getElementById ( "lentes_1" )
d.disabled= true
d.checked=false

}
con ese codigo activo y desactivo otros radio, checked es para seleccionarlos o viceversa

Geze · #5 (**permalink**) 14/06/2011, 20:04

Gracias, tu código me ha dado una idea que no funciona muy bien, pero tiene la idea. Necesito que al dar click en el primer checkbox los otros se bloqueen y al volver a dar click se desbloqueen y se desmarque el primer checkbox

Código:

function marca(c1,c2,c3)
   {
	var c1=document.getElementById(c1);
	var c2=document.getElementById(c2);
	var c3=document.getElementById(c3);
	 if(c1.checked==false)
	 {
	   c1.checked=true;
	   c2.disabled=true;
	   c3.disabled=true;
     }
     else
     {
	   c1.checked=false;
     }
   }

Código HTML:

<input type='checkbox' id='c1' onClick='javascript:marcar("c1","c2","c3");'>Todos los valores<br>
<input type='checkbox' id='c2'> Segundo valor<br>
<input type='checkbox' id='c3'>Tercer valor

juan24_14 · #6 (**permalink**) 15/06/2011, 14:15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label> Vives con tu Familia<br />
</label>
<p>
<label>
<input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_0" onclick="Si()"/>
si</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="2" id="RadioGroup1_1" onclick="No()"/>
no</label>
<br />
<br />
</p>
<label></label>
<p>
<label>Mama
<input type="radio" name="mama" id="mama" disabled="disabled"/>
</label>
<label>
<input type="radio" name="amigos" id="amigos" disabled="disabled"/>
amigos</label>
</p>
<p>papa
<label>
<input type="radio" name="papa" id="papa" disabled="disabled"/>
</label>
<label>
<input type="radio" name="otros" id="otros" disabled="disabled"/>
otros</label>
</p>
<p>Hijos
<label>
<input type="radio" name="hijos" id="hijos" disabled="disabled"/>
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
</body>
</html>
<script>
var m=document.getElementById ( "mama" )
var p=document.getElementById ( "papa" )
var h=document.getElementById ( "hijos" )
var a=document.getElementById ( "amigos" )
var o=document.getElementById ( "otros" )
function Si()
{
m.disabled= false
p.disabled= false
h.disabled= false
a.disabled= true
o.disabled= true
a.checked=false
o.checked=false

}
function No()
{
m.disabled= true
p.disabled= true
h.disabled= true
a.disabled= false
o.disabled= false
m.checked=false
p.checked=false
h.checked=false

}
</script>
este codigo hace mas o menos lo que quieres, al seleccionar si se activan mama, papa, hijos y al dar no se activan amigos otros, espero que te ayude exitos cvualquier cosa me comentas a mi correo [email protected] y te ayudo .

juan24_14 · #7 (**permalink**) 15/06/2011, 14:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label> Vives con tu Familia<br />
</label>
<p>
<label>
<input type="checkbox" name="RadioGroup1" value="1" id="si" onclick="Si()"/>
si</label>
<br />
<label>
<input type="checkbox" name="RadioGroup1" value="2" id="no" onclick="No()"/>
no</label>
<br />
<br />
</p>
<label></label>
<p>
<label>Mama
<input type="checkbox" name="mama" id="mama" disabled="disabled"/>
</label>
<label>
<input type="checkbox" name="amigos" id="amigos" disabled="disabled"/>
amigos</label>
</p>
<p>papa
<label>
<input type="checkbox" name="papa" id="papa" disabled="disabled"/>
</label>
<label>
<input type="checkbox" name="otros" id="otros" disabled="disabled"/>
otros</label>
</p>
<p>Hijos
<label>
<input type="checkbox" name="hijos" id="hijos" disabled="disabled"/>
</label>
</p>
<p>
<label
</label>
</p>
</form>
</body>
</html>
<script>
var si=document.getElementById ( "si" )
var no=document.getElementById ( "no" )
var m=document.getElementById ( "mama" )
var p=document.getElementById ( "papa" )
var h=document.getElementById ( "hijos" )
var a=document.getElementById ( "amigos" )
var o=document.getElementById ( "otros" )
function Si()
{
m.disabled= false
p.disabled= false
h.disabled= false
a.disabled= true
o.disabled= true
a.checked=false
o.checked=false
no.checked=false

}
function No()
{
m.disabled= true
p.disabled= true
h.disabled= true
a.disabled= false
o.disabled= false
m.checked=false
p.checked=false
h.checked=false
si.checked=false
}
</script>
y este Ejemplo es con check como quieres. suerte.

Geze · #8 (**permalink**) 23/06/2011, 16:56

Está bueno ese código, pero no es como lo busco. Lo voy a escribir en pseudocódigo:

Cita:

SI (checkbox que marca todos está desactivado)
ENTONCES:
-selecciona todos todos los checkbox y ponlos en disabled, exepto el checkbox que marca todos
SINO
ENTONCES:
-deselecciona todos los checkbox, tambien el que marca todos y ponlos en enabled

Como ven todo funciona con un sólo checkbox, no con dos, además de que el que selecciona nunca se bloquea, todos los demás sí.
Eso es más o menos loq ue necesito hacer, necesito su ayuda, gracias!