Shortening JavaScript Fonction

Question

Je dois avouer que je ne connais pas grand-chose à JavaScript, c'est pourquoi ma question peut sembler un peu ridicule.

Mais ce que j'essaie de faire est de saisir des valeurs de groupes radio sélectionnés par nom.

Il ressemble à ceci

function calc() { 
    var op1 = document.getElementsByName('form[radio1]'); 
    var op2 = document.getElementsByName('form[radio2]'); 
    var op3 = document.getElementsByName('form[radio3]'); 

    var result = document.getElementById('result'); 

    result.value = 0; 

    result.value = parseInt(result.value); 

    for (i = 0; i < op1.length; i++) { 
     if (op1[i].checked) result.value = parseInt(result.value) + parseInt(op1[i].value); 
    } 

    for (i = 0; i < op2.length; i++) { 
     if (op2.options[i].selected) result.value = parseInt(result.value) + parseInt(op2[i].value); 
    } 

    for (i = 0; i < op3.length; i++) { 
     if (op3.options[i].selected) result.value = parseInt(result.value) + parseInt(op3[i].value); 
    } 

    return false; 
} 

Et ceci est ma forme. Im en utilisant le formulaire rs pour joomla.

<form action="index.php" enctype="multipart/form-data" id="userForm" method="post"> 

    <input name="form[radio1]" value="25" id="radio20" type="radio"> 
     <label for="radio20">Description1</label> 

    <input name="form[radio1]" value="35" id="radio21" type="radio"> 
     <label for="radio21">Description2</label> 



    <input name="form[radio2]" value="20" id="radio20" type="radio"> 
    <label for="radio20">Description1</label> 

    <input name="form[radio2]" value="30" id="radio21" type="radio"> 
    <label for="radio21">Description2</label> 


    <input type="hidden" value="0" id="result" name="form[result]"> 

    <input type="submit" class="rsform-submit-button" onclick="calc()" id="submit" name="form[submit]" value="submit"> 

Et tout serait OK, car la fonction fonctionne. le seul problème est que j'ai environ 80 radiogrammes.

Existe-t-il un moyen de le raccourcir?

Answer 1

Utilisez des tableaux d'objets (comme tous les boutons radio, par exemple) et parcourez-les. Commencez comme ceci:

var opts = [], 
    numOpts = 80; 

for (var i=0; i<numOpts, i++) 
{ 
    opts.push(document.getElementsByName('form[radio' + i + ']')); 
} 

---

Edit: jetons un coup à la pleine fonction. La seule chose dont je ne suis pas sûr à 100% est de savoir si vous voulez utiliser opX[i].checked ou opX.options[i].selected (puisque votre code fait des choses différentes pour op1 et op2/3). Il ne devrait pas être trop difficile d'extrapoler si j'ai mal deviné, cependant.

function calc() 
{ 
    var opts = [], 
     numOpts = 80, 
     value = 0, 
     result = document.getElementById('result'), 
     i, j, opt; 

    for (i=0; i<numOpts; i++) 
    { 
     opts.push(document.getElementsByName('form[radio' + i + ']')); 
    } 

    numOpts = opts.length; 

    for (i=0; i<numOpts; i++) 
    { 
     opt = opts[i]; 
     for (j=0; j<opt.length; j++) 
     { 
      // or did you mean: 
      // if (opt.options[j].selected) ? 
      if (opt[j].checked) 
      { 
       value = value + parseInt(opt[j].value, 10); 
      } 
     } 
    } 

    result.value = value; 

    return false; 
} 

Answer 2

jQuery est une bibliothèque géniale qui ressemble à du JavaScript sur les stéroïdes. Cela vaut la peine d'apprendre et il y a beaucoup d'exemples dans la nature.

Vous pouvez écrire complexe « selectors » tout à fait comme ceci:

$('input[name=form[radio1]]').attr('checked').each(function() { 
     result.value = $(this).attr('value') 
}) 

(Je ne sais pas si elle acceptera un nom comme « forme [Radio1] » comme valable, mais essayer.