チェックボックスの特定のブロックに同じコードを使用

Question

私はフォーム内に7つの異なるブロックのチェックボックスを持っており、各ブロックに約8つのチェックボックスがあります。

私は、ユーザーが各ブロックの上部にあるチェックボックスをオンにして、そのブロックの下にあるブロックをチェック（およびアンティック）できるようにしたいと思います。

私は自分のコードをまとめようとしていますが、初心者であるため、動作させるのに苦労しています。

相続人

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#checkall").click(function()    
     { 
      var checked_status = this.checked; 
      county = $(this).val(); 
      countyfind = $("input").find('.' + county); 
      countyfind.each(function() 
      { 
       this.checked = checked_status; 
      }); 
     });     
    }); 

    </script> 

ブロックの上部にあるチェックボックス：

<input type="checkbox" id="checkall" name="east_anglia" value="east_anglia"> &nbsp;<h4 class="postcoderegion">East Anglia</h4> 

...以下をチェックします：

<input type="checkbox" id="served_areas0" name="served_areas0" class="east_anglia" value="AL" style="vertical-align:middle;" /> 

助けや指導は非常に便利です！ありがとう。

Answer 1

#checkallを.checkallに変更し、id="checkall"のチェックボックスをclass="checkall"に変更すると、コードが機能します。

問題は、IDがドキュメント内で一意である必要があります。現在のドキュメントに同じ値を持つIDが複数ある場合は、結果は未定義です。また、jQueryはIDにdocument.getElementByIdを使用しているため、最初のDOMクエリでは何も見つかりません。つまり、クリックイベントは登録されません。

さらに、適切なクラスとが入力の子である要素ではなく、適切なクラスで入力を見つける必要があります。 countyfind = $("input").find('.' + county);をcountyfind = $("input." + county);に変更してください（@ nocacheの答えをご覧ください）。

しかし、もっと良い方法があります。 nイベントリスナーを作成する代わりに、delegate（bodyまたは包含要素のいずれか）を1つ作成して、クリックをリッスンし、適切なクリックに反応します。

ので、代わりの：

$("#checkall").click(function() { 
    // Do things here 
}); 

試してください：あなたは、イベントをしたら

$("body_or_selector").delegate(".checkall", "click", function(event) { 
    // Do things here 
}); 

その後、あなたはその下のチェックボックスを見つけ、それをチェックするためにevent.targetを扱うことができます。

var $target = $(event.target); 
var checked_status = $target.prop("checked"); 
$target.closest("container_for_you_checkboxes"). 
     find(":checkbox"). 
     prop("checked", checked_status); 

を参照してください：JsFiddle

Answer 2

あなたのコードは、あなたが郡を特定したら、あなたの検索が間違っている除いて、右に見えます。これ

countyfind = $("input").find('.' + county); 

： ちょうどこの行を変更

countyfind = $("input." + county); 

.find()は、セレクタに一致子要素に見えるが、入力要素自体は、所望のクラスではなく、任意の子を有します入力の