次のブロック要素のチェックボックスのチェックボックスをすべてオン/オフにします。

Question

以下のdd.optionsの中のすべてのものを選択解除しようとしています。 "dept_checkbox"がそれぞれ選択されています。このスニペットでは、各ddブロックに1〜100個のチェックボックスがあります（最初の "dept_checkbox"セクションには2つのコースがあり、次のセクションには1つのセクションがあります）。

<div class="accordion"> 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EYES|VISI</a></dt> 
    <dd class="options"> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
    </label> 
    </li> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
    </label> 
    </li> 
    </dd> 

    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EARS|HEAR</a></dt> 
    <dd class="options"> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
    </label> 
    </li> 
    </dd>  
</div> 

私はそう遠く以下を得たが、私はそれについて移動するかどうかはわかりません、私はjQueryを使ってこれを実現しようとしています。

「名前」または「値」の値がすべて変更されているため、これらの値を呼び出すのをやめようとしています。 （すべての結果とともに表示される）静的なものだけがSelect allチェックボックスと 'options'クラスの 'dept_checkbox'で、以前のすべてのボタンを選択/選択解除するためのチェックボックスを保持します。

Answer 1

$('.dept_checkbox').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $(this).parent().next().find('input').prop('checked', true); 
 
    } else { 
 
    $(this).parent().next().find('input').prop('checked', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <dt><input class="dept_checkbox" type="checkbox"><a href="">EYES|VISI</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
 
    </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
 
    </label> 
 
    </li> 
 
    </dd> 
 

 
    <dt><input class="dept_checkbox" type="checkbox"><a href="">EARS|HEAR</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
 
    </label> 
 
    </li> 
 
    </dd> 
 
</div>

Answer 2

$('.options').find(':checkbox ').prop({checked: true}) これは、オプションのすべてのチェックボックスを検索し、 '：checked'プロパティをtrueに設定します。ここで

Answer 3

は、私達は行く：

checkCheckboxes = function(check){ 
 
$(".accordion input[type='checkbox']").prop('checked',check); 
 
} 
 

 
//Uncheck all the checkboxes 
 
checkCheckboxes(false); 
 
//Check all the checkboxes 
 
checkCheckboxes(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EYES|VISI</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
 
    </label> 
 
    </li> 
 
    </dd> 
 

 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EARS|HEAR</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
 
    </label> 
 
    </li> 
 
    </dd>  
 
</div>