come accedere caselle ed i loro valori con getElementsByName

Question

Supponiamo che io ho la seguente sezione di una forma:

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

Ogni volta che l'utente seleziona o deseleziona una casella di controllo, ho bisogno lo script per ricalcolare l'addon variabile al totale di tutti i valori delle caselle che vengono controllati. Questo è il codice mi è venuta prima, ma non sembra funzionare per me:

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

Lo script continua a tornare NaN come il valore di addon. All'inizio, mi chiedevo se javascript stesse leggendo i valori come stringhe e non come numeri interi, ma l'aggiunta di una (x) * 1 a circa av [e] non risolveva questo problema. Poi, ho letto un po 'di più in getElementsByName e ho letto che forse non si trattava di un array tipico, ma di una lista dei nodi.

Sono nuovo di Javascript e non riesco a capire dopo ore di googling su come manipolare questo nodeList. Qualsiasi aiuto è apprezzato. Mi piacerebbe mantenere le 8 caselle di controllo in celle di tabella separate, quindi l'utilizzo di qualcosa come childNodes non funzionerebbe esattamente qui, per quanto posso dire. Vorrei anche evitare qualsiasi jQuery a questo punto ... Sto ancora imparando e voglio assicurarmi di capire come farlo in plain old javascript prima. Grazie!

Answer 1

È necessario utilizzare la proprietà value e anche analizzarla su un numero. es:

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

Answer 2

av [e] restituirà l'elemento non il valore dell'elemento lì per addon non è un numero.

credo che si desidera utilizzare av[e].value

Si noti inoltre che da quando hai messo addon=0 all'inizio della funzione del valore di addon sarà sempre solo il valore della av[e].value durante la chiamata di funzione.

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

Answer 3

BTW, js invadente

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

è molto depressiva per mantenere il vostro codice, sia per js e codice html sono scritti insieme.

provare a scrivere il codice js discreto come:

in HTML:

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

In JS:

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