2011-01-05 21 views
6

Supongamos que tengo la siguiente sección de una forma:cómo acceder casillas de verificación y sus valores con getElementsByName

<td> 
<p> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="89.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="29.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="49.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="39.00" /> 
</p> 
</td> 

<td> 
<p> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br /> 
    <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /> 
</p> 
</td> 

Cada vez que el usuario selecciona o anula la selección de una casilla de verificación, necesito el guión para volver a calcular la variable complemento a la total de todos los valores de los cuadros que se verifican Este es el código que se me ocurrió primero, pero no parece funcionar para mí:

function iaddon() { 
addon=0; 
av=document.getElementsByName("faddon"); 
for (e=0;e<av.length;e++) { 
    if (av[e].checked==true) { 
    addon+=av[e]; 
    } 
    } 
} 

El guión sigue volviendo NaN como el valor del complemento. Al principio, me preguntaba si javascript estaba leyendo los valores como cadenas y no enteros, pero agregar un (x) * 1 alrededor de v [e] no solucionó esto. Luego, leí un poco más en getElementsByName y leí que posiblemente no sea una matriz típica, sino una nodeList.

Soy nuevo en Javascript y no puedo entender después de horas de google cómo manipular esta nodeList. Cualquier ayuda es apreciada. Me gustaría mantener las 8 casillas de verificación en celdas de tabla separadas, por lo que usar algo como childNodes no funcionaría exactamente aquí, hasta donde sé. También me gustaría alejarme de cualquier jQuery en este punto ... Todavía estoy aprendiendo y quiero asegurarme primero de que entiendo cómo hacerlo en un simple javascript. ¡Gracias!

+0

duplicado posible de [Obtener el valor de la casilla de verificación marcada?] (Http: //stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) – Siraj

Respuesta

6

Necesita usar la propiedad value y también analizarlo en un número. por ejemplo:

function iaddon() 
{ 
    addon = 0; 
    for (e = 0; e < av.length; e++) 
    { 
     if (av[e].checked == true) 
     { 
      addon += parseInt(av[e].value, 10); 
     } 
    } 
} 
5

av [e] devolverá el elemento, no el valor del elemento allí para addon no es un número.

creo que desea utilizar av[e].value

también en cuenta que desde que configuró addon=0 al inicio de la función el valor del complemento será siempre sólo será el valor de av[e].value durante la llamada a la función.

function iaddon() { 
addon=0; 
av=document.getElementsByName("faddon"); 
for (e=0;e<av.length;e++) { 
    if (av[e].checked==true) { 
    addon+=av[e].value; 
    } 
    } 
} 
+3

Y por el amor de dios y todas las cosas santas, por favor declare sus variables con var. –

+0

@steve_c ... ¡haz un buen punto! + 1 –

+0

¡Eso parece haberlo resuelto, muchachos! ¡Eso es genial! Sin embargo, tuve que usar el * 1 después de su ayuda, como referencia. Parece que después de que el usuario seleccionara más de una casilla de verificación estaba engarzando los valores. Además, como referencia, ¿debo usar var para declarar las variables inicialmente solo o cada vez que hago un cambio en él? El complemento var anterior se declaró anteriormente en el script ... – mendahu

2

Por cierto, js molestos

<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/> 

es muy depresivo para mantener su código, tanto para js y código html están escritas juntas.

tratar de escribir código js discreta como:

en HTML:

<input id="index1" type="checkbox" name="faddon" value="89.00"/> 

En JS:

$('index1').click(function() { 
    // Edit your function 
}); 
+1

El último ejemplo no es JavaScript puro, sino un add-onn llamado JQuery. –

+0

Debe editar esto para usar JS puro para instalar el controlador de eventos para todos los elementos respectivos en lugar de JQuery para un solo elemento que ni siquiera forma parte de la pregunta. – handle

Cuestiones relacionadas