重複クラスと一致するjQueryのチェックボックスのループリスト

Question

同じクラスの2つのチェックボックスをチェックするかどうかを確認しようとしています。

HTMLはここにある：

<fieldset class="activities"> 
    <legend>Register for Activities</legend> 
    <label> 
    <input type="checkbox" name="all"> Main Conference — $200 
    </label> 
    <label class="tues_morn"> 
    <input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100 
    </label> 
    <label class="tues_aft"> 
    <input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100 
    </label> 
    <label class="tues_morn"> 
    <input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100 
    </label> 
    <label class="tues_aft"> 
    <input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100 
    </label>   
    <label> 
    <input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100 
    </label> 
    <label> 
    <input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100 
    </label> 
</fieldset> 

そして、ここでは、私はjQueryのにしようとしているが、私はのいずれかをクリックしたときに、私は（あなたはあまりにも多くのモーニングクラスにサインアップ）アラートを取得していますものですチェックボックス。何か案は？

var $activities = $('.activities > label'); 

//Activities 
var tuesMorn = 0 
var tuesAft = 0 
$activities.each(function(){ 
    var activityClass = ($(this).attr("class")); 
    $activities.change(function(){ 
    if (activityClass === 'tues_morn'){ 
     tuesMorn += 1; 
    } else if (activityClass === 'tues_aft'){ 
     tuesAft +=1; 
    } 
    if (tuesMorn > 1) { 
     alert("You Signed Up For Too Many Morning Classes"); 
    } else if (tuesAft > 1) { 
     alert ("You Signed Up For Too Many Aft Classe") 
    } 
    }); 
}); 

Answer 1

まず、あなたは入力ではなく、ラベルにあなたクラス= "tues_time"を移動する必要があります。

変更があるだけで、それらを毎回カウントし、

// Get the inputs, rather than the labels 
var checkBoxes = $('.activities > label > input'); 

checkBoxes.change(function() { 
    var tuesMorn = checkBoxes.filter('.tues_morn:checkbox:checked').length; 
    var tuesAft = checkBoxes.filter('.tues_aft:checkbox:checked').length; 
    if (tuesMorn > 1) { 
     alert("You Signed Up For Too Many Morning Classes"); 
    } else if (tuesAft > 1) { 
     alert ("You Signed Up For Too Many Aft Classe") 
    } 
}); 

むしろより高いスコープ内の変数にそれらを追加...あなたはこれがあなたのために働く必要があることを行っているしたら。読んで維持するのがずっと簡単ですが、これは良いことです！ :)ここで

https://jsfiddle.net/8Lk6g2nf/1/

Answer 2

は実施例である、あなたは、あなたの質問に回答されていると思われる場合、あなたの正確な要件

var $activities = $('.activities input[type="checkbox"]'); 
 

 
//Activities 
 
var tuesMorn = 0; 
 
var tuesAft = 0; 
 

 
$activities.change(function() { 
 
    var activityClass = $(this).closest('label').attr("class"); 
 
    var isChecked = this.checked; 
 

 
    if (activityClass === 'tues_morn') { 
 
    tuesMorn = isChecked ? tuesMorn + 1 : tuesMorn - 1; 
 
    if (tuesMorn > 1) { 
 
     alert("You Signed Up For Too Many Morning Classes"); 
 
    } 
 
    } else if (activityClass === 'tues_aft') { 
 
    tuesAft = isChecked ? tuesAft + 1 : tuesAft - 1; 
 
    if (tuesAft > 1) { 
 
     alert("You Signed Up For Too Many Aft Classe") 
 
    } 
 
    } 
 
});

.tues_morn { 
 
    background: orange; 
 
} 
 

 
.tues_aft { 
 
    background: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="activities"> 
 
    <legend>Register for Activities</legend> 
 
    <label> 
 
    <input type="checkbox" name="all"> Main Conference — $200 
 
    </label> 
 
    <label class="tues_morn"> 
 
    <input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100 
 
    </label> 
 
    <label class="tues_aft"> 
 
    <input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100 
 
    </label> 
 
    <label class="tues_morn"> 
 
    <input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100 
 
    </label> 
 
    <label class="tues_aft"> 
 
    <input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100 
 
    </label> 
 
</fieldset>