只有在選中複選框的情況下才能獲取textfield的值

嘿傢伙我想獲取僅在此界面中選中複選框的值，並且每個複選框都有其自己的值我怎麼能這樣做，這讓我瘋狂 [THIS] [1 ]我怎麼能做到這一點只有在選中複選框的情況下才能獲取textfield的值

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>EFF 2016 theorique</title> 
 
     <script> 
 
      function Myfunction() { 
 
       var repas = document.forms[0]; 
 
       var txt = 0; 
 
       var i; 
 
       for (i = 0; i <= 5; i++) { 
 
        if (repas[i].checked) { 
 
         txt = txt+ (parseInt(repas[i].value) * parseInt(document.getElementById("repase_"+i).value)) ; 
 
         document.getElementById("resultat").value = parseInt(txt.toString()).toString(); 
 
        } 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <p id="test">this is test and it will change</p> 
 
     <h1>Calcul valeur energetique d'un repas</h1> 
 
     <h4>Choisir les elements qui composent votre repas</h4> 
 
     <form> 
 
      <pre> 
 
      <input type="checkbox" name="repas" value="275" /> PAIN <input type="text" id="repase_0" value="0" />  grammes 
 

 
      <input type="checkbox" name="repas" value="180" /> VIANDE <input type="text" id="repase_1" value="0" /> grammes 
 

 
      <input type="checkbox" name="repas" value="04" /> LEGUMES <input type="text" id="repase_2" value="0" /> grammes  
 

 
      <input type="checkbox" name="repas" value="116" /> BANANE <input type="text" id="repase_3" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="80" /> POMMES <input type="text" id="repase_4" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="140" /> YAOURT <input type="text" id="repase_5" value="0" /> unites 
 
    
 
      </pre> 
 
      <input type="button" value="CALCULER" onclick="Myfunction()"/> 
 
      <pre> 
 
      La valeur energetique de votre repas est : <input type="text" id="resultat" value="" /> 
 
      </pre> 
 
     </form> 
 
    </body> 
 
</html>

ck.imgur.com/gJaxa.png

THIS

來源

2017-06-17 Mr.Robot

與querySelectorAll()試圖找到檢查element.and與forEach迭代然後找到使用nextElementSlibing

function Myfunction() { 
 
    var res = 0; 
 
    document.querySelectorAll('input:checked').forEach(function(a) { 
 
    res += parseFloat(a.nextElementSibling.value) 
 
    }) 
 
    document.getElementById("resultat").value = res 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="test">this is test and it will change</p> 
 
<h1>Calcul valeur energetique d'un repas</h1> 
 
<h4>Choisir les elements qui composent votre repas</h4> 
 
<form> 
 
    <pre> 
 
      <input type="checkbox" name="repas" value="275" /> PAIN <input type="text" id="repase_0" value="0" />  grammes 
 

 
      <input type="checkbox" name="repas" value="180" /> VIANDE <input type="text" id="repase_1" value="0" /> grammes 
 

 
      <input type="checkbox" name="repas" value="04" /> LEGUMES <input type="text" id="repase_2" value="0" /> grammes  
 

 
      <input type="checkbox" name="repas" value="116" /> BANANE <input type="text" id="repase_3" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="80" /> POMMES <input type="text" id="repase_4" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="140" /> YAOURT <input type="text" id="repase_5" value="0" /> unites 
 
    
 
      </pre> 
 
    <input type="button" value="CALCULER" onclick="Myfunction()" /> 
 
    <pre> 
 
      La valeur energetique de votre repas est : <input type="text" id="resultat" value="" /> 
 
      </pre> 
 
</form>

來源

2017-06-17 05:16:46 prasanth

謝謝你，真的是對我的作品^^ –

歡迎你@ Mr.Robot.My答案是解決您的問題[標記它作爲一個答案】（https://stackoverflow.com/help/someone -answers）對未來的訪問者有幫助 – prasanth

你需要遍歷的複選框中的下一個元素值，你可以讓他們var repas = document.forms[0].querySelectorAll('[type="checkbox"]');

這是最後的工作代碼：

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>EFF 2016 theorique</title> 
 
    <script> 
 
    function Myfunction() { 
 
     var repas = document.forms[0].querySelectorAll('[type="checkbox"]'); 
 
     var txt = 0; 
 
     for (var i = 0; i < repas.length; i++) { 
 
     var repa = repas[i]; 
 
     if (repa.checked) { 
 
      var value = parseInt(repa.value); 
 
      var input = parseInt(document.getElementById("repase_" + i).value); 
 
      txt += value * input; 
 
     } 
 
     } 
 
     document.getElementById("resultat").value = txt.toString(); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <p id="test">this is test and it will change</p> 
 
    <h1>Calcul valeur energetique d'un repas</h1> 
 
    <h4>Choisir les elements qui composent votre repas</h4> 
 
    <form> 
 
    <pre> 
 
      <input type="checkbox" name="repas" value="275" /> PAIN <input type="text" id="repase_0" value="0" />  grammes 
 

 
      <input type="checkbox" name="repas" value="180" /> VIANDE <input type="text" id="repase_1" value="0" /> grammes 
 

 
      <input type="checkbox" name="repas" value="04" /> LEGUMES <input type="text" id="repase_2" value="0" /> grammes  
 

 
      <input type="checkbox" name="repas" value="116" /> BANANE <input type="text" id="repase_3" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="80" /> POMMES <input type="text" id="repase_4" value="0" /> unites 
 

 
      <input type="checkbox" name="repas" value="140" /> YAOURT <input type="text" id="repase_5" value="0" /> unites 
 

 
      </pre> 
 
    <input type="button" value="CALCULER" onclick="Myfunction()" /> 
 
    <pre> 
 
      La valeur energetique de votre repas est : <input type="text" id="resultat" value="" /> 
 
      </pre> 
 
    </form> 
 
</body> 
 

 
</html>

來源

2017-06-17 05:22:02 luisenrike

是的，它工作得很好謝謝你先生 –

樂於幫助，並歡迎Stack Overflow。如果此答案或任何其他人解決了您的問題，請將其標記爲已接受。 – luisenrike

這應該工作：遍歷chechboxes和填充之外的結果for循環，也沒有必要來填充結果在每個迭代。

  function Myfunction() { 
      var repas = document.forms[0]; 
      var txt = 0; 
      var i; 
      for (i = 0; i <= 5; i++) { 
       if(document.getElementsByName("repas")[i].checked){ 
        txt = txt+ (parseInt(repas[i].value) * parseInt(document.getElementById("repase_"+i).value)) ; 
       } 
      } 
      document.getElementById("resultat").value = parseInt(txt.toString()).toString(); 
     }

來源

2017-06-17 05:50:34 Tal

只有在選中複選框的情況下才能獲取textfield的值

回答

相關問題