根据它们的值增加和减少选定的单选按钮

Question

我有一段脚本计算从一系列单选按钮中选择的肉的数量，并将“选择肉类”更改为“x肉类选择”。这是它的开始。

$('input.meats').not('[value=None]').on('click', function() { 
    var count = $('input.meats:checked').length; 
    $('.select-meats span').text(count+' meats chosen'); 
}); 

这就是我的表单的开始。

Chicken: X None _ Half _ Full 
Beef:  X None _ Half _ Full 
Pork:  X None _ Half _ Full 
Select meats. 

如果我更改选择，“选择肉类”更改为总选定的肉类。无论是Half还是Full都无所谓。

Chicken: X None _ Half _ Full 
Beef:  _ None X Half _ Full 
Pork:  _ None _ Half X Full 
2 meats chosen. 

我的问题是，如果我将所选择的肉类之一改回无，它不会从总数中减去。

Chicken: X None _ Half _ Full 
Beef:  _ None X Half _ Full 
Pork:  X None _ Half _ Full 
2 meats chosen.      <-- Should be "1 meats chosen". 

我该如何从总数中减去自己，我应该将选择改回“无”？

Answer 1

你有你的not()错误的地方。通过将其置于事件处理程序注册中，当用户按下None选项时，您的代码将不会运行。通过不计算在你的count计算中，你计算出None为1肉。

移动的.not('[value=None]')到您的count计算出来的事件处理程序登记：

$('input.meats').on('click', function() { 
    var count = $('input.meats:checked').not('[value=None]').length; 
    $('.select-meats span').text(count+' meats chosen'); 
}); 

Answer 2

把not的计数变量，像这样：

$('input.meats').on('click', function() { 
 
    var count = $('input.meats:checked').not('[value=none]').length; 
 
    $('.selected-meats span').text(count+' meats chosen'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <input class="meats" name="chicken" type="radio" value="none"> None<br> 
 
    <input class="meats" name="chicken" type="radio" value="half"> Half<br> 
 
    <input class="meats" name="chicken" type="radio" value="full"> Full 
 
    <hr> 
 
    <input class="meats" name="beef" type="radio" value="none"> None<br> 
 
    <input class="meats" name="beef" type="radio" value="half"> Half<br> 
 
    <input class="meats" name="beef" type="radio" value="full"> Full 
 
    <br> 
 
    <br> 
 
    <hr> 
 
    <div class="selected-meats"> 
 
    <span></span> 
 
    </div>