獲取父子標籤/值複選框選擇子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> 

我想在複選框價值爲各自的父母與子女的關係

點擊第一個複選框來獲得這個值。

的Level-1> 2級>三級值1次

點擊第二個複選框以獲得以下價值。

等級-1> 2級>等級-3值2

Answer 1

您可以添加on change事件並獲取所有li父母的更改輸入以獲取有關li'級別'的信息我將其添加爲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

試試這個。我加入代碼 '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>