javascript - 显示总数的复选框未按计划运行

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>