在 jQuery 中使用复选框来切换 2 个数值

Posted 2023-05-08

【中文标题】在 jQuery 中使用复选框来切换 2 个数值

【英文标题】：Use checkbox in jQuery to toggle 2 numeric values

【发布时间】：2021-10-15 07:34:38

【问题描述】：

当复选框被选中和取消选中时，我将如何更改以下代码以在非零值和零值之间切换？见

$(document).ready(function() 
  $('input[type="checkbox"]').click(function() 
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  );
);

.box 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" name="colorCheckbox" value="n1"> num 1</label>
  <label><input type="checkbox" name="colorCheckbox" value="n2"> num 2</label>
  <label><input type="checkbox" name="colorCheckbox" value="n3"> num 3</label>
</div>
<div class="n1 box">55000</div>
<div class="n2 box">200</div>
<div class="n3 box">300</div>

https://jsfiddle.net/hcanning/53ye8wf7/

【问题讨论】：

你想达到什么目的，真的不懂问题

它用于切换成本。用户检查产品复选框并显示价格，例如10 美元。未选中时，我希望该值为 0，因此我可以将已选中和未选中的产品值相加，而不会得到 NaN。这些值在 div 中，例如 <div id="cost1">10</div>

您不能为复选框添加值，因为它是布尔值，表示为真或假。我建议您进行隐藏输入，然后为其添加价值。

我的最终目标是让这个想法发挥作用：jsfiddle.net/hcanning2012/20jrgq6e/18 ...用户透露价格，然后他们就会被总计。我将价格 div 中的值汇总到 Total div

【参考方案1】：

你可以这样做，得到每个复选框的总和，根据需要进行调整

$(document).ready(function() 
var sum = 0;
  $('input[type="checkbox"]').change(function() 
    var inputValue = $(this).attr("value");

   if(this.checked) 
       sum = parseInt(sum) + parseInt($("." + inputValue).text());
   else 
       sum = parseInt(sum) - parseInt($("." + inputValue).text());
    
    $("#sum").text(sum);

    $("." + inputValue).toggle();
  );
);

.box 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   


<table >
<tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n1"> Show Price</label></td><td><div class="n1 box">55000</div></td>
</tr><tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n2"> Show Price</label></td><td><div class="n2 box">200</div></td>
</tr><tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n3"> Show Price</label></td><td><div class="n3 box">300</div></td>
</tr>

<tr> 
<td > Total: </td><td><div id="sum">0</div></td>
</tr>

【讨论】：

谢谢。当复选框被选中时，它的目的是设置值 55000（在示例中）<div class="n1 box">55000</div>，如果未选中该复选框，则 div 为空<div class="n1 box"></div> 所以当它被求和时我得到一个 NaN。我试图在未选中复选框时将该空 div 设置为 0，以便我可以正确总计。此想法是，在选中该复选框时，使用$('.n1').html("55000"); 987654327 @在jQuery中设置55000。这是我的最终目标：jsfiddle.net/hcanning2012/20jrgq6e/22

你不会得到 NaN，因为它会从 var sum 中减去，所以不需要设置为 0，只需在要显示总和的地方使用 id="sum" 的 div，我也解析为对这些值进行整数处理，因此不会出现 NaN

检查编辑为表格，以反映 jsfiddle

只要你遵循你的模式，你可以添加任意多的行

好的。非常感谢。