リストの子どものチェックボックスを選択

Question

見つかった方法（http://jsfiddle.net/nick_craver/BgXrz/、http://code.google.com/p/jquery-tree/）を使用して解決できなかった問題が今すぐ発生しています。どちらも私のソリューションを正確に解決するものではありませんが、どのように行うか、私が望むものを私に与えてくれました。

大丈夫です。ここに私の問題は、次のとおりです。

私は（ulとli付き）のリストを持って、その中で

<li> 
    there is a checkbox and some text. E.g.: 
    <ul> 
     <li> 
      <p> 
       <input type="checkbox" name="this_name" checked/>Description 
       Bla: <input type="text" size="8" name="this_arg" value=""/> 
      </p> 
     </li> 
    </ul> 

各以内きた（決算 li後ろに）他の名前を持つ他の引数の完全なツリーがありますなどのようなツリーを作成します。

<ul> 
    <li>A 
    <ul> 
     <li>AA</li> 
     <li>AB 
     <ul> 
      <li>ABA</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

構造自体は現在はっきりしているはずです。

今、jQueryまたはJavascriptを使用して、親の子要素のすべての要素をチェックしたいと考えています。たとえば "A"とマークを付けると、すべてのノードをチェックする必要があります。私は「AB」をクリックすると、私は「ABA」をチェックすることにしたいというように...

私は非常に私はそれを行うことが、私は任意の助けをいただければと思いますどのように表示されません。

Answer 1

これはあなたの探しているものですか？

http://jsfiddle.net/johncmolyneux/pqLts/2/

<ul> 
    <li>Main 
     <ul> 
      <li><input type="checkbox" /> parent 1 
       <ul> 
        <li><input type="checkbox" />sub 1</li> 
        <li><input type="checkbox" />sub 2 
         <ul> 
          <li><input type="checkbox" />sub sub 2</li> 
          <li><input type="checkbox" />sub sub 3</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><input type="checkbox" />parent 2</li> 
     </ul> 
    </li> 
</ul> 

$(function() { 
    $(":checkbox").click(function() { 
     var checked = $(this).attr("checked"); 
     $(this).parent().find(":checkbox").attr("checked", checked); 
    }); 
}); 

Answer 2

あなたの問題はあなたの例の追加リストに実際に「対応する」のチェックボックスの子ではないということです。彼らは実際には兄弟です。実際に子供にする場合は、jQueryなどで選択するのは簡単です。たとえば、jQuery：

$(':checkbox').click(function() { 
    $(':checkbox', $(this).parent()).attr('checked', 'checked'); 
}); 

このようなものです。

Answer 3

あなたは本当にこのような構造でリストの集合を持っていると仮定：

<ul> 
    <li> 
     <p><input type="checkbox" /> A</p> 
    </li> 
    <ul> 
     <li> 
      <p><input type="checkbox" /> AA</p> 
     </li> 
     <li> 
      <p><input type="checkbox" /> AB</p> 
     </li> 
     <ul> 
      <li> 
       <p><input type="checkbox" /> ABA</p> 
      </li> 
     </ul> 
    </ul> 
</ul> 

あなたはこのようにそれを行うことができます。基本的に@ mgibsonbrの答えと同じです

$('li').click(function(){ 
    $(this) 
     .find('p>input:checkbox').attr('checked', 'checked') 
    .end() 
     .next('ul').find('li>p>input:checkbox').attr('checked', 'checked'); 
}); 

を。

注：ここでは、チェックボックスをクリックすると「A」にチェックボックスを含めると仮定しています。チェックボックスがない場合は、HTMLで省略します。チェックしない場合は、クリックハンドラの2行目と3行目を削除します。

あなたのHTMLは次のように実際にある場合：

<ul> 
    <li><p><input type="checkbox" /> A</p> 
     <ul> 
      <li><p><input type="checkbox" />AA</p></li> 
      <li><p><input type="checkbox" />AB</p> 
       <ul> 
        <li><p><input type="checkbox" />ABA</p></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

その後、あなたはそれをこのように行うことができます。

$('li').click(function(e){ 
    e.stopPropagation(); 
    $(this).find('p>input:checkbox').attr('checked', 'checked'); 
}); 

は、ここでは、バブルアップし、原因から子供liにイベントを防ぐために必要ですすべてのチェックボックスがチェックされます。

ここには、両方の可能性のあるsampleがあります。