子li要素のチェックボックスの選択時に親子ラベル/値を取得

Question

それぞれの子liのチェックボックスを選択すると、lvl1ラベルとlvl2 liラベルの値を取得しようとしています。

<ul class="list" > 
<li class="lvl1"> 
    <a><h4>Level-1</h4></a> 
    <ul> 
    <li class="lvl2"> 
      <a><label>Level-2</label></a> 
      <ul> 
      <li class="lvl3"> 
       <input type="checkbox" class="childbox" value="Level-3 Value1"/> 
      </li> 
     </ul> 
    </li> 
    </ul> 
<ul> 
    <li class="lvl2"> 
      <a><label>Level-2</label></a> 
      <ul> 
      <li class="lvl3"> 
       <input type="checkbox" class="childbox" value="Level-3 Value2"/> 
      </li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 

は、私は、それぞれの親と子の関係は、この値を取得する

クリックして最初のチェックボックスのチェックボックスに応じた値を取得したいです。

レベル1>レベル2>レベル3値1

クリックして第二のチェックボックスは、以下の値を取得します。

レベル1>レベル2>レベル3が値2

Answer 1

として選択することができますon changeを追加することができますイベントを取得し、liの変更された入力の親がli 'level'に関する情報を取得するようにしました。これをd ATA属性：

$(document).ready(function(){ 
 
    $('.childbox').change(function(){ 
 
     var parents=""; 
 
     var current_value=$(this).val(); 
 
     $(this).parents('li').each(function(index) { 
 
      parents= $(this).data('level-name')+" > "+parents; 
 
     }); 
 
     console.log(parents+" : "+current_value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<ul class="list" > 
 
<li class="lvl1" data-level-name='Level 1'> 
 
    <a><h4>Level-1</h4></a> 
 
    <ul> 
 
    <li class="lvl2" data-level-name='Level 2'> 
 
      <a><label>Level-2</label></a> 
 
      <ul> 
 
      <li class="lvl3" data-level-name='Level 3'> 
 
       <input type="checkbox" class="childbox" value="Level-3 Value1"/> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
<ul> 
 
    <li class="lvl2" data-level-name='Level 2'> 
 
      <a><label>Level-2</label></a> 
 
      <ul> 
 
      <li class="lvl3" data-level-name='Level 3'> 
 
       <input type="checkbox" class="childbox" value="Level-3 Value2"/> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li> 
 
</ul>

Answer 2

私はそれを行う方法のようないくつかのサンプルコードを書きました。私はこれを達成するために相対セレクタを使用します。

$("input[type=checkbox]").change(function() { 
 
    console.log($(this).closest(".lvl2").find("label").html()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list" > 
 
<li class="lvl1"> 
 
    <a><h4>Level-1</h4></a> 
 
    <ul> 
 
    <li class="lvl2"> 
 
      <a><label>Level-2</label></a> 
 
      <ul> 
 
      <li class="lvl3"> 
 
       <input type="checkbox" class="childbox" value="Level-3 Value1"/> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
<ul> 
 
    <li class="lvl2"> 
 
      <a><label>Level-3</label></a> 
 
      <ul> 
 
      <li class="lvl3"> 
 
       <input type="checkbox" class="childbox" value="Level-3 Value2"/> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li> 
 
</ul>

Answer 3

この.Iを試してみてください 'leve1、レベル2' のコードとlabel,inputを添加し、value.youがあなたの願い

$('input:checkbox').click(function(){ 
 
console.log($(this).closest('.lvl1').text()) 
 
console.log($(this).closest('.lvl2').find('label').text()) 
 
console.log($(this).val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list"> 
 
    <li class="lvl1"> 
 
    <a> 
 
     <h4>Level-1</h4> 
 
    </a> 
 
    <ul> 
 
     <li class="lvl2"> 
 
     <a><label>Level-2</label></a> 
 
     <ul> 
 
      <li class="lvl3"> 
 
      <input type="checkbox" class="childbox" value="Level-3 Value1" /> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul> 
 
     <li class="lvl2"> 
 
     <a><label>Level-2</label></a> 
 
     <ul> 
 
      <li class="lvl3"> 
 
      <input type="checkbox" class="childbox" value="Level-3 Value2" /> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>