Question

嘿伙计们，我想在这个界面中只获取选中复选框的值，每个复选框都有自己的价值我怎么能这样做让我疯狂 [这] [1]我怎么能这样做

＆＃13;

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

＆＃13;

ck.imgur.com/gJaxa.png

THIS

Answer 1

尝试使用querySelectorAll()查找已检查的元素。并使用forEach进行迭代，然后使用nextElementSlibing找到下一个元素值

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要遍历复选框，您可以使用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>

Answer 3

这应该有效：迭代chechbox并在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();
        }

仅在选中复选框时才获取文本字段的值

3 个答案: