グループからのチェックボックスがチェックされていないか、少なくとも1つのチェックボックスがチェックされていない場合にイベントをキャッチして、関連するdivのクラスを追加するにはどうすればいいですか？

Question

<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a href="#collapse" data-parent="#accordionQuiz" data-toggle="collapse1.." class="accordion-toggle"> 
     <strong>1...</strong> 
     Question 
     </a> 
    </div> 

    <div class="accordion-body collapse" id="collapse1.."> 
     <div class="accordion-inner"> 
      <div class="control-group"> 
       <label for="1..@1.." class="control-label">A..</label> 
       <div class="controls"> 
        <label class="checkbox"> 
        <input type="checkbox" value="FirstAnswer" name="1..@1.." id="1..@1.."> 
        content 
        </label> 
       </div><!-- /.controls --> 
      </div><!-- /.control-group --> 

      <div class="control-group"> 
       <label for="2..@2.." class="control-label">B..</label> 
       <div class="controls"> 
        <label class="checkbox"> 
        <input type="checkbox" value="SecondAnswer" name="2..@2.." id="2..@2.."> 
        content 
        </label> 
       </div><!-- /.controls --> 
      </div><!-- /.control-group --> 

     </div><!-- /.accordion-inner --> 
    </div><!-- /.accordion-body collapse .. --> 
</div><!-- /.accordion-group --> 

---

上記のコードはクイズフォームであり、すべての質問に対して繰り返されています。質問に関連し、チェックボックスのどれもがチェックされていないか、または少なくとも一つをチェックしたときにイベントをキャッチして、div.accordion-見出しのためのクラスを追加する方法Example

---

：それはのように見えますか？

ような何か：何がチェックされていない - 空、少なくとも1 - -空ではありません。

さまざまな色があり、一度に1つしか表示されないため、ユーザーがスキップした質問に戻ってくるのは非常に便利な機能です。

私はこれを自分で試しましたが、私はjQueryを学び始めたばかりです...私はあきらめます。おそらく、これは強力なAJAXの仕事ですか？

Answer 1

のためにそれを最適化することができると確信してい：

1. すべてのチェックボックスにclickのイベントを登録します。
2. 各clickで、グループでチェックされたチェックボックスの数をカウントします。
3. 次に、チェックボックスの数を確認してアクションベースを設定します。

JavaScriptコードがを最適化することができ、このようになります。

$('.accordion-group :checkbox').click(function() { 
    var $this = $(this); 
    var $group = $this.parents('.accordion-group:first'); 
    var $checkboxes = $group.find(':checkbox'); 
    var checks = 0; 
    $checkboxes.each(function() { 
     if ($(this).is(':checked')) { 
      checks++; 
     } 
    }); 
    console.log(checks); 

    var $heading = $group.find('.accordion-heading'); 

    if (checks === 0) 
     $heading.removeClass('not-empty').addClass('empty'); 
    else 
     $heading.removeClass('empty').addClass('not-empty'); 
});​ 

私はjsfiddleでデモをした：http://jsfiddle.net/W2XD2/

---

EDITS

私はより具体的に、それを最適化するためのスクリプトを最適化：

$('.accordion-group :checkbox').click(function() { 
    var $group = $(this).parents('.accordion-group:first'); 
    var checks = $group.find(':checked').length;  
    var $heading = $group.find('.accordion-heading'); 

    if (checks === 0) 
     $heading.removeClass('not-empty').addClass('empty'); 
    else 
     $heading.removeClass('empty').addClass('not-empty'); 
});​ 

あなたはjsfiddleで更新されたリビジョンを確認できます：http://jsfiddle.net/W2XD2/1/

Answer 2

エラーを一切チェックしていないのですが、どうすればいいですか？私はあなたが次の手順で、これを達成するために非常に単純です、あなたの実際のアプリケーション

function validateGroup(groupID) 
    { 
    var valid = 0; 
    var $group = $('#' + groupID) 

    $group.find(':checkbox').each(function() { 
     if ($(this).is(':checked') 
     { 
     valid = 1; 
     } 
     }); 

    if (!valid) 
     { 
     $group.addClass("NotValid"); 
     } 
    } 

Answer 3

どのようにイベントをトリガーするかわかりません。

あなたが保存したり、あなたがこれをしたいかもしれない見出しの横アコーディオンをクリックする上でチェックを行いたい場合：

$(".b_save").click(function() { 
//change the above to $(".accordion-heading") if that is what you trigger the event with 
    $.each($(".accordion-group"), function() { 
     cls = $(this).find(":checked").length? "#00b5f8":"#ff0000"; 
     $(this).find(".accordion-heading").css("background-color", cls); 
     }) 
    }) 

あなたがチェックボックスをクリックしたときに色を変更したい場合は、これがありますコード：

$(function(){ 
    $("input:checkbox").click(function(){ 
     parentEl = $(this).closest(".accordion-group"); 
     cls = $(parentEl).find(":checked").length?"#00b5f8":"#ff0000"; 
     $(parentEl).find(".accordion-heading").css("background-color", cls); 
    }) 


})