如何在jquery中对单选按钮和复选框的值求和答案

【问题标题】：How to sum value of radio button and checkbox in jquery如何在jquery中对单选按钮和复选框的值求和
【发布时间】：2016-03-03 21:51:48
【问题描述】：

我已经有一个代码可以计算单选按钮的总和。我在其中一个单选按钮组中改变了主意，并决定将其设为复选框。当我勾选复选框上的项目时，总和返回 NaN。我会在我的 jquery 中添加/更改什么以便它识别复选框值？

这是我的代码：

jQuery

 < script type = "text/javascript" >
   function calcscore() {
     $(".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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
  <label>
    <input class="calc" type="radio" name="rad1" id="rad1" />
    
  </label>
  <input type="hidden" name="rad1" value="100">
</li>


<li>
  <label>
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" />
    
  </label>
  <input type="hidden" name="check1" value="200">
</li>

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

感谢所有帮助。

【问题讨论】：

我不是 php 专家，但您的单选按钮 value 属性中有什么？整数？
您问题中的代码不起作用，因为它包含 PHP 脚本。你能把它剥离到最小的工作示例吗？
是的。它是用户在前端输入的文本。它作为商品的价格
@Martin 抱歉。生病简化它
你需要隐藏输入做什么？请将“rad1”输入的值移动到“rad1”收音机

标签： javascript jquery html checkbox sum

【解决方案1】：

这段代码应该回答你的问题：

function calcscore() {
	score = 0;
	$(".calc:checked").each(function () {
		score += Number($(this).val());
	});
	$("#price").text(score.toFixed(2));
	$("#sum").val(score)
}
$().ready(function () {
	$(".calc").change(function () {
		calcscore()
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
  <label>
    <input class="calc" type="radio" name="rad1" id="rad1" value="100" />
  </label>
</li>
<li>
  <label>
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" />
  </label>
</li>
<input type="hidden" name="sum" id="sum" value="0">
<p>Total: PHP <span id="price">0</span>
</p>

【讨论】：

感谢大家的回复！代码已经准备好了！

【解决方案2】：

对于您现在在问题中的标记和用例。试试这个

$('.calc').on('click', function() {

  var sum = 0;

  $('.calc:checked').each(function() {
    sum += Number($(this).parent().next().val())

  })

  $('#price').text(sum)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
  <label>
    <input class="calc" type="radio" name="rad1" id="rad1" />

  </label>
  <input type="hidden" name="rad1" value="100">
</li>


<li>
  <label>
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" />

  </label>
  <input type="hidden" name="check1" value="200">
</li>

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

试试这个，值不需要隐藏字段。我删除了它们并使用了复选框的值属性。

$('.calc').on('click', function() {

  var sum = 0;

  $('.calc:checked').each(function() {
    sum += Number($(this).val())

  })

  $('#price').text(sum)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
  <label>
    <input class="calc" type="checkbox" name="check1" value="100" id="rad1" />

  </label>

</li>


<li>
  <label>
    <input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" />

  </label>

</li>

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

【讨论】：