當未選中組中的復選框或至少選中一個復選框，然后為相關的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-heading添加一個類，如何捕獲事件？

像這樣的東西：none不被檢查為空 ，至少一個為非空 。

將會有不同的顏色，這對於用戶回到他跳過的問題將是非常有用的功能，因為一次只能看到一個。

我嘗試自己完成此操作，但我剛剛開始學習jQuery，並且...我放棄了。 也許這是強大的AJAX的工作？

Answer 1

完全沒有錯誤檢查，但是這就是我的方法！ 我確定您可以針對實際應用對其進行優化

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 2

通過以下步驟來完成此操作非常簡單：

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/

---

編輯

我對腳本進行了優化，使其更加具體，並對其進行了優化：

$('.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 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);
     })


})