2016-04-11 6 views
0

".selectall"をチェックするときにすべてのチェックボックスを選択する必要がありますが、セレクタを配置する方法はさまざまですが、まだ動作させることはできません。私は、セレクタをどのように配置するかわからないと思う - >ラベル - >入力。何か案は?ありがとうございました。クラスなしのすべてのチェックボックスを選択

$(document).ready(function() { 
 
    $('#selecctall').click(function(event) { //on click 
 
    if (this.checked) { // check select status 
 
     $('.iw_notify_heirarchical_list li').each(function() { //loop through each checkbox 
 
     $('input', this).checked = true; //select all checkboxes with class "checkbox1" 
 
     }); 
 
    } 
 
    }); 
 
});
<ul class="iw_notify_heirarchical_list"> 
 
    <label> 
 
    <input type="checkbox" id="selectall">All</label> 
 

 
    <li id="notifications-164"> 
 
    <label class="selectit"> 
 
     <input value="164" type="checkbox" name="tax_input[notifications][]" id="in-notifications-164" checked="checked">Calendar Events</label> 
 
    <ul class="children"> 
 

 
     <li id="notifications-173" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="173" type="checkbox" name="tax_input[notifications][]" id="in-notifications-173">Boards and Committees</label> 
 
     </li> 
 

 
     <li id="notifications-169" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="169" type="checkbox" name="tax_input[notifications][]" id="in-notifications-169">City Council</label> 
 
     </li> 
 

 
     <li id="notifications-171" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="171" type="checkbox" name="tax_input[notifications][]" id="in-notifications-171" checked="checked">City Events</label> 
 
     </li> 
 

 
     <li id="notifications-172"> 
 
     <label class="selectit"> 
 
      <input value="172" type="checkbox" name="tax_input[notifications][]" id="in-notifications-172">Community Events</label> 
 
     </li> 
 

 
     <li id="notifications-170" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="170" type="checkbox" name="tax_input[notifications][]" id="in-notifications-170">Departments</label> 
 
     <ul class="children"> 
 

 
      <li id="notifications-174"> 
 
      <label class="selectit"> 
 
       <input value="174" type="checkbox" name="tax_input[notifications][]" id="in-notifications-174" checked="checked">Executive</label> 
 
      </li> 
 

 
      <li id="notifications-175"> 
 
      <label class="selectit"> 
 
       <input value="175" type="checkbox" name="tax_input[notifications][]" id="in-notifications-175">Finance</label> 
 
      </li> 
 

 
      <li id="notifications-176"> 
 
      <label class="selectit"> 
 
       <input value="176" type="checkbox" name="tax_input[notifications][]" id="in-notifications-176">Fire</label> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 

 
    <li id="notifications-165"> 
 
    <label class="selectit"> 
 
     <input value="165" type="checkbox" name="tax_input[notifications][]" id="in-notifications-165">Employment Opportunities</label> 
 
    </li> 
 

 
    <li id="notifications-163" class="popular-category"> 
 
    <label class="selectit"> 
 
     <input value="163" type="checkbox" name="tax_input[notifications][]" id="in-notifications-163" checked="checked">News</label> 
 
    </li> 
 

 
    <li id="notifications-168"> 
 
    <label class="selectit"> 
 
     <input value="168" type="checkbox" name="tax_input[notifications][]" id="in-notifications-168">None</label> 
 
    </li> 
 

 
    <li id="notifications-166"> 
 
    <label class="selectit"> 
 
     <input value="166" type="checkbox" name="tax_input[notifications][]" id="in-notifications-166">Weekly Calendar Events</label> 
 
    </li> 
 
</ul>

+0

これはあなたの問題を解決すると思います! http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html –

答えて

0

あなたは、チェックボックスをチェックするために、正しいjQueryの構文を使用していません。

$('input', this).checked = true; 

$('input', this).prop('checked', true); 

checkedあるべきではDOM要素のプロパティではなく、jQueryのプロパティです。

.eachも必要ありません。jQueryメソッドはコレクションに対して呼び出すことができ、選択したすべての要素を更新します。だからあなたは単に書くことができます:

$('.iw_notify_heirarchical_list li :checkbox').prop('checked', true); 
+0

ありがとう@Barmar。私はそれを修正しましたが、それでも動作しません。 –

+0

あなたはタイプミスがあります: '#selecctall'は'#selectall'でなければなりません。 – Barmar

+0

入手しました。ありがとう、それは動作します! –

関連する問題