在子li元素的复选框选择上获取父子标签/值答案

【问题标题】：Get parent child label/value upon checkbox selection of child li elements在子li元素的复选框选择上获取父子标签/值
【发布时间】：2017-05-03 14:38:04
【问题描述】：

我试图在选择它们各自的子 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

【问题讨论】：

我曾尝试使用每个函数获取选择器。但我只能获得复选框的选择值。 $("input[type='checkbox']").on('click',function(){ var selected = []; $.each($("input[name='secondarycheck']:checked"), function(){ //当收音机被选中时执行的函数 selected.push($(this).val()); //console.log(selected); }); alert("Selection Results: " + selected.加入(" > ")); });

标签： javascript jquery html html-lists frontend

【解决方案1】：

您可以添加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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

试试这个 .i 添加了 'leve1,level2' 和 label,input 值的代码。您可以根据需要选择

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

【讨论】：

但是如果我使用这个（最接近的），它也会拉下下一个 lvl2 列表的 lvl2 元素。