在子 li 元素的复选框选择时获取父子 label/value

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 > Level-2 > Level-3 值 1

点击第二个复选框获取以下值。

Level-1 > Level-2 > Level-3 值 2

Answer 1

我写了一些关于如何做的示例代码。我会使用相对选择器来完成这个。

$("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 2

试试这个。我为 'leve1,level2' 添加了代码，label,input value.you 可以 select 如您所愿

$('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>

Answer 3

您可以添加 on change 事件并获取更改输入的所有 li 父项以获取有关 li 的信息 'level' 我将其添加为数据属性：

$(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>

在子 li 元素的复选框选择时获取父子 label/value

Get parent child label/value upon checkbox selection of child li elements

html

javascript

jquery

frontend

html-lists