値に基づいて選択したラジオボタンを追加および減算する

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. 

私の問題は、私は戻っnoneに選択された肉のいずれかを変更した場合、それは合計から減算されませんです。

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肉とカウントしています。

$('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計算に、イベントハンドラ登録のうち

移動に.not('[value=None]')

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