jQuery複選框選中全部，選擇無並選擇組

Question

我有一個表單，其中複選框分爲多個組，並用單選按鈕組來選擇全部並選擇無。複選框標籤將獲得附加到它們的類（用於使CSS成爲圖像）。我遇到的問題是腳本在條件語句中循環回到自己身上，我一直在試圖弄清楚自己的頭髮。

我已經創建了這裏的代碼http://jsfiddle.net/jaread83/V5SSM/

我想要它做什麼的jsfiddle頁：

全選單擊，所有複選框標籤獲取類「c_on」的所有複選框得到遏制。

SelectNone被點擊後，所有複選框標籤都會刪除'c_on'類，並且所有複選框輸入都會被取消選中。

當section_label被點擊時，該部分中的所有複選框標籤都會得到'c_on'並且也會被檢查，然後在未選中時刪除檢查的狀態並僅從該部分刪除'c_on'類。

當單擊一個不是section_label的複選框標籤時，該單個項目標籤將添加'c_on'類，並且該複選框將獲得檢查狀態。

的HTML：

<div class="form"> 
<div class="document"> 
    <div class="section inline"> 
     <label class="label_radio lightblue" id="selectAllButton" for="selectAll"> 
      <input type="radio" name="masscheck" id="selectAll" />Select all</label> 
    </div> 
    <div class="section inline"> 
     <label class="label_radio lightblue" id="selectNoneButton" for="selectNone"> 
      <input type="radio" name="masscheck" id="selectNone" />Select none</label> 
    </div> 
    <div class="clear"></div> 
</div> 
<div class="document"> 
    <div class="section"> 
     <label class="label_check section_label blue" for="docs_1131"> 
      <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label> 
    </div> 
</div> 
<div class="document"> 
    <div class="section"> 
     <label class="label_check section_label blue" for="docs_1118"> 
      <input type="checkbox" id="docs_1118" name="docs" value="1118" /> 
      Section 1 
     </label> 

     <blockquote> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1119"> 
        <input type="checkbox" id="docs_1119" name="docs" value="1119" /> 
        Subsection 1.1 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1120"> 
        <input type="checkbox" id="docs_1120" name="docs" value="1120" /> 
        Subsection 1.2 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1121"> 
        <input type="checkbox" id="docs_1121" name="docs" value="1121" /> 
        Subsection 1.3 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1122"> 
        <input type="checkbox" id="docs_1122" name="docs" value="1122" /> 
        Subsection 1.4 
       </label> 
      </div> 
     </blockquote> 
    </div> 
</div> 

<div class="document"> 
    <div class="section"> 
     <label class="label_check section_label blue" for="docs_1123"> 
      <input type="checkbox" id="docs_1123" name="docs" value="1123" /> 
      Section 2 
     </label> 

     <blockquote> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1124"> 
        <input type="checkbox" id="docs_1124" name="docs" value="1124" /> 
        Subsection 2.1 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1125"> 
        <input type="checkbox" id="docs_1125" name="docs" value="1125" /> 
        Subsection 2.2 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1126"> 
        <input type="checkbox" id="docs_1126" name="docs" value="1126" /> 
        Subsection 2.3 
       </label> 
      </div> 
      <div class="subsection"> 
       <label class="label_check sub_label lightblue" for="docs_1127"> 
        <input type="checkbox" id="docs_1127" name="docs" value="1127" /> 
        Subsection 2.4 
       </label> 
      </div> 
     </blockquote> 
    </div> 
</div> 


<button type="submit" class="icon icon-arrow-white">Submit</button> 

的JS：

jQuery(document).ready(function($) { 
//check all and checknone 
    $('#selectAll').click(function() { 
     var selectAllButton = $('#selectAllButton'); 
     var selectNoneButton = $('#selectNoneButton'); 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
     var checklabels = $('.label_check'); 
     checkboxes.attr('checked', true); 
     checklabels.addClass('c_on'); 
     selectAllButton.addClass('c_on'); 
     selectNoneButton.removeClass('c_on'); 
    }); 

    $('#selectNone').click(function() { 
     var selectAllButton = $('#selectAllButton'); 
     var selectNoneButton = $('#selectNoneButton'); 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
     var checklabels = $('.label_check'); 
     checkboxes.attr('checked', false); 
     checklabels.removeClass('c_on'); 
     selectNoneButton.addClass('c_on'); 
     selectAllButton.removeClass('c_on'); 
    }); 

    //check all within section 
    $('.section .section_label').click(function(){ 
    var p = $(this).parent(); 

    if($(this).hasClass('c_on')){ 
     // remove the checkbox classes on sub sections 
     p.find('.subsection').find('label').removeClass('c_on'); 
     // remove the class from the thing we have clicked 
     $(this).removeClass('c_on'); 
    } else { 
     p.find('.subsection').find('label').addClass('c_on'); 
     $(this).addClass('c_on'); 
    } 
    }); 

}); 

任何幫助，將不勝感激。

Answer 1

的使用prop()代替attr()檢查複選框，檢查演示here

更新

​​

讓我知道，如果你已經在這個任何疑問或擔憂。

很高興爲您效勞

Answer 2

這樣的事情？

$('#selectAllButton').on('click', function() { 
    $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on'); 
}); 
$('#selectNoneButton').on('click', function() { 
    $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on'); 
}); 

$('.section .section_label input').click(function() { 

    var chckClass = ""; 
    if (!this.checked) { 
     chckClass = ""; 
    } else { 
     chckClass = "c_on" 
    } 
    $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass); 
}); 
$('input[type="checkbox"]').on('click', function() { 
    var chckClass = ""; 
    if (!this.checked) { 
     chckClass = ""; 
    } else { 
     chckClass = "c_on" 
    } 
    $(this).closest('label').removeClass('c_on').addClass(chckClass); 
}); 

DEMO