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＆gt; 2级＆gt; Level-3 Value 1

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

Level-1＆gt; 2级＆gt; Level-3 Value 2

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个.i添加了＆＃39; leve1，level2＆＃39;和label,input value.you可以选择你的愿望

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以添加on change个活动并获取所有已更改输入的li个父母，以获取有关该级别的信息。我将其添加为数据属性：

＆＃13;

$(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);
   });
});

＆＃13;

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

＆＃13;

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

3 个答案: