当单击复选框不起作用时总结隐藏字段的值

Question

我有一个复选框，但其值已分配给该项目的名称。现在我有这个隐藏的字段，其中有价值分配给物品的价值。现在，当我运行我的jQuery使用隐藏字段来计算所选项目的总和时，它不起作用。当我将价格和计算ID分配给复选框而不是隐藏字段时，它会以相反的方式工作。

这里是我的jQuery：

<script type="text/javascript"> 
    function calcscore(){ 
     var score = 0; 
     $(".calc:checked").each(function(){ 
     score+=parseInt($(this).val(),10); 
       }); 
      $('#price').text(score.toFixed(2)); 
$("input[name=sum]").val(score) 
    } 
    $().ready(function(){ 
    $(".calc").change(function(){ 
    calcscore() 
}); 
}); 
    </script> 

而且我的html：

 <li> 
     <label> 
     <input class="calc" type="checkbox" name="seasoning[]" value="Title1"/> 
     The Title 
     </label> 
     <input type="hidden" name="title8" value="250"> 
     </li> 


      <li> 
       <label> 
       <input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title 
     </label> 
     <input type="hidden" name="title8" value="150"> 
     </li> 

     <p>Total: PHP <span id="price">0</span></p> 

任何有识之士将不胜感激。由于

Answer 1

您的代码应该更像下面的解决方案，并检查它是如何将工作的jsfiddle：https://jsfiddle.net/yehiaawad/wwtwmaLv/ 你的HTML：

<li> 
    <label> 
    <input class="calc" type="checkbox" name="seasoning[]" value="Title1"/> 
    The Title 
     <input type="hidden" name="title8" value="250"> 

    </label> 
    </li> 
     <li> 
      <label> 
      <input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title 
        <input type="hidden" name="title8" value="150"> 
    </label> 
    </li> 
     <p>Total: PHP <span id="price">0</span></p> 

你的JS

 function calcscore(){ 
     var score = 0; 
     var checked=$(".calc:checked ~ input[type=hidden]").each(function(){ 
     score+=parseInt($(this).val()); 
     }); 
$('#price').text(score.toFixed(2)); 
    } 
    $(document).ready(function(){ 
    $(".calc").change(function(){ 
    calcscore() 
}); 
});