Contar checkbox

A ver si me puedes ayudar con lo siguiente: Tengo este codigo que he cogido de aulambra.com:
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar" onClick="contar();">
<br>
</form>
</body>
</html>
Mi problema es que quiero que segun los vayas seleccionando, en un cuadro de texto te vayan saliendo los que tienes seleccionados, es decir, que sea on-line, y no que te lo diga cuando le das al boton.

4 respuestas

Respuesta
1
Pues lo que tienes que hacer es lanzar una función que te cuente cada vez que desmarcas / marcas uno. Es decir en el onCLick de las checkBoxes. Entonces puedes cambiar el contenido de una capa que te crees para ir poniendo lo que creas conveniente, ya sea el número de checkboxes marcados o otra cosa que te sea de interés.
Ya, pero... ¿como se hace? es que de javascript, logicamente, no tengo mucha idea, y no se como se escribe ese codigo, por eso he puesto en el mensaje el codigo de la pagina entero. Muchas gracias
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
Aunque este código seguramente no es el más optimo para hacer esto...
Casi casi... esta todo bien, pero no quiero que me salga en un mensaje de alerta, sino en una caja de texto, o sea, que se vea escrito en la propia web. A ver si me echas el último empujoncito. Muchiiiiiiisimas gracias por tu ayuda.
P.D: ¿por que dices que no es el mejor codigo para hacer eso?
La primera vez que consigo entender un codigo de Javascript (aunque me he ayudado con otro javascript que ya tenia). Este es el codigo de lo que queria:
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = formulario.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
formulario.dias.value = cont;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="formulario" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="text" name="dias" size="10">
<br>
</form>
</body>
</html>
Respondeme cualquier tonteria, y asi te puntuo bien. Muchas gracias por tu enorme ayuda
<html>
<head>
<title>Cuenta CheckBox</title>
<style>
#capaTexto{
position:absolute;
top:20px;
left:200px;
width:150px;
height:150px;
clip:rect(0,150,150,0);
background-color:red;
layer-background-color:red;
}
</style>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
document.all.capaTexto.innerHTML = "El número de checkbox pulsados es " + cont
//alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="capaTexto">El número de checkbox pulsados es 0</div>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
Otra mas dificil (bueno creo yo). Este codigo genera un calendario auntomaticamente. ¿Se puede hacer que junto al dia, en el calencario, aparezca un checkbox?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=JavaScript src="calendario.js">
</SCRIPT>
<STYLE type=text/css>#micalendario {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 9px; BORDER-LEFT: thin outset; BORDER-BOTTOM: thin outset; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .nombmes {
BORDER-RIGHT: black 0px ridge; BORDER-TOP: black 0px ridge; FONT-WEIGHT: bold; FONT-SIZE: 12px; BORDER-LEFT: black 0px ridge; COLOR: #0000cc; LINE-HEIGHT: 12px; PADDING-TOP: 3px; BORDER-BOTTOM: #0033ff thin ridge; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 5px; BACKGROUND-COLOR: #cccccc
}
#micalendario .nombdias {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #0000cc; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .dianormal {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #000099; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .diafiesta {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #ff0000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario CAPTION {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #ffff99; BORDER-LEFT: outset; COLOR: #3300cc; LINE-HEIGHT: 70%; PADDING-TOP: 4px; BORDER-BOTTOM: thin outset
}
</STYLE>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<FORM name=form1 action="" method=post><SELECT
onchange="vermes(this.parentElement.lista, this.parentElement.anio.value)"
size=1 name=lista> <OPTION value=1 selected>Enero</OPTION> <OPTION
value=2>Febrero</OPTION> <OPTION value=3>Marzo</OPTION> <OPTION
value=4>Abril</OPTION> <OPTION value=5>Mayo</OPTION> <OPTION
value=6>Junio</OPTION> <OPTION value=7>Julio</OPTION> <OPTION
value=8>Agosto</OPTION> <OPTION value=9>Septiembre</OPTION> <OPTION
value=10>Octubre</OPTION> <OPTION value=11>Noviembre</OPTION> <OPTION
value=12>Diciembre</OPTION></SELECT> <BR><INPUT maxLength=4 size=4 value=2001
name=anio> <BR><INPUT onclick="vermes(this.form.lista, this.form.anio.value)" type=button value=Actualizar name=Button>
</FORM>
<P> </P>
<P>Este ejemplo corresponde a la versión 1.1 que corrige los problemas con la
versión 6 de Netscape.</P>
<P> </P>
<P> </P>
<DIV id=micalendario
style="Z-INDEX: 1; LEFT: 110px; OVERFLOW: visible; WIDTH: 120px; POSITION: absolute; TOP: 10px; HEIGHT: auto"></DIV></BODY></HTML>
Ah! mi e-mail es el siguiente, por si es mas comodo por e-mail:
[email protected]
Todo se puede hacer en esta vida! Pero eso ya es más coñazo, asi que paso de demostrartelo por ahora! Jejeje
Respuesta
1
En vez de poner el onClick="contar()" en el boton, ponlo en cada checkbox. De esa manera, cada vez que se pulse uno, hará la comprobación de cuántos hay pulsados.
DERKE.- http://www.derke.es.vg/
_____________________________________
Respuesta
1
Puedes poner en cada checkbox el evento onClick y llamar a la función contar como haces en el boton.
Respuesta
1
Te copio a continuación el código como quedaría, pero lo unico que hay que hacer es capturar el evento, en vez de en el botón, en cada checkbox (cuadrito), así será on-line como tu dices. Venga, te lo adjunto.
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 10<br>
<br>
</form>
</body>
</html>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta

Problemas con los resultados de los repostes

Tengo un problema al hacer mis reportes en PHP resulta que los resultados de la consulta me salen muy abajo de lo normal
1 respuesta

Clásico juego de memoria con javascript

Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas). Podés verlo en funcionamiento en: http://www.tunait.com/javascript/scripts/juegos/memoria.htm...
1 respuesta

Espacio entre lineas

Tengo por por ej el siguiente código <p><font color="#FFFFFF">HOME</font></p> ¿Sabes qué cual es el comando que le tendría que agregar para que haya menos espacio entre lineas? Osea abajo tengo escrita otra linea, pero quiero que este más junta a la...
2 respuestas

Tengo un hoja de estilos externa pero en la parte de lo vinculos no me funciona

Tengo un hoja de estilos con el siguiente codigo . Acierto { font-family:Arial; font-size: 16px; color:green; background-color:yellow; /* sacado de la paleta http://jscolor.com/ */ text-align:center; } .no_acierto { font-family:Arial; font-size:...
2 respuestas

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Como Redireccionar a url leída en un campo de mysql

Agradecería vuestra ayuda porque me he quedado para en este punto. Tengo una base de datos con los campos usuario, password y url ( cada usuario tiene su propia url) Tengo una web con un formulario de acceso y al validar los datos (usuario, password)...
1 respuesta

Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he...
2 respuestas

Mostrar un resultado en una capa

Resulta que necesito realizar una pagina que capture un numero en de un campo de texto y calcule su factorial... Hasta aqui muy bien. Lo que pasa es que este resultado debe salir en una capa que debera estar oculta hasta el momento que se presione el...
1 respuesta

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas