jquery - jQuery が親の要素を正しくカウントしない

Question

すべてのチェック ボックスをオンにすると次の項目が表示されるアコーディオン メニューを作成しています。

最初のステップでは機能しますが、アコーディオン メニューの最初の項目を超えると、チェックボックスの数が正しくカウントされません。

これは私がこれまでに持っているものですhttp://jsfiddle.net/EDYqs/ ...アラートを残したので、見つかったチェックボックスの数を確認できます。

これを説明するのは非常に難しいので、何が問題なのかを自分で確認する必要があります。

Answer 1

parent("dd")parent()に置き換えるだけです。

        available = $(this).parent().children('input[type=checkbox]').length;
        checked = $(this).parent().children('input[type=checkbox]:checked').length;

Answer 2

はチェックボックスの直接の親ではないため (クリック ハンドラー内で設定されているもの) 、.closest()ではなくを使用する必要があります。.parent()<dd>this

例えば

$('input[type=checkbox]').on('change', function(){
      available = $(this).closest('dd').find('input[type=checkbox]').length;
      checked = $(this).closest('dd').find('input[type=checkbox]:checked').length;

      // ...
});

また、<label>チェックボックスのテキストに s を使用し、そのfor属性をチェックボックスの ID に設定することを検討してください (もちろん、各チェックボックスに一意の ID を指定する必要があります)。これにより、ユーザーはテキストをクリックしてチェックボックスを切り替えることができ、スクリーンリーダーなどのアクセシビリティ技術がそのチェックボックスの説明を知ることもできます。