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.

如果我更改选择，“选择肉类”将更改为所选的总肉类。无论是半价还是全价都没关系。

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放在count变量上，如下所示：

$('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>

根据其值添加和减去选定的单选按钮

2 个答案: