复选框显示总计不按计划工作

Question

这是我的JavaScript

<script type="text/javascript">
   $('#inputs input').change(function() {
   if (this.checked) {
   $span = $('<span></span>');
   $span.text(this.value);
   $('#results').append($span);
   }
   else {
   $('span:contains('+this.value+')', '#results').remove();
   }
   });
   </script>

这是我的HTML

<div id="inputs">
<input type="checkbox" name="amount" value="50.00"></input>
<input type="checkbox" name="amount" value="20.00"></input>
<input type="checkbox" name="amount" value="15.00"></input>
<input type="checkbox" name="amount" value="10.00"></input>
<span>Total: $</span><span id="results"></span>

由于复选框都具有相同的名称，因此它将它们分组，因此一次只能检查一个，我的问题是：如何选中此选项，以便在选中另一个复选框时，选中的第一个复选框的值消失。这只有在你选中一个方框然后取消选中同一个方框时才有效，但如果你选中一个方框然后检查另一个方框，你会看到两个值出现。我无法弄清楚这一点。任何帮助将不胜感激。谢谢！

Answer 1

这种“单一选择”行为属于无线电输入，而不是复选框。

$('#inputs input').change(function() {
   if (this.checked) {
   $span = $('<span></span>');
   $span.text('$'+ this.value);
   $('#results').html($span);
   }
   else {
   $('span:contains('+this.value+')', '#results').remove();
   }
   });

body {
  background: skyblue;  
}

<div id="inputs">
<input type="radio" name="amount" value="50.00" id=i50>
<label for="i50">50</label>  
  
<input type="radio" name="amount" value="20.00" id=i20>
<label for="i20">20</label>
  
<input type="radio" name="amount" value="15.00" id=i15>
<label for="i15">15</label>
  
<input type="radio" name="amount" value="10.00" id=i10>
<label for="i10">10</label>
  
<br><br><span>Selected: </span><span id="results"></span></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>