从检查的输入中获取标签

Question

我想.text()从选中的输入中获取标签。实际上，我的代码检查是否检查了输入，然后从每个<li>具有相同类的对象（不仅是检查的对象）中获取标签。我该如何实现？我认为我应该使用.parent（）或.child（）属性，但我不知道如何使用。

我尝试过alert($('#myId input').parent('label').text());但没有成功。

Codepen https://codepen.io/Qasph/pen/LyNJev?editors=1010

$('#result').click(function() {
  // If an input is checked
  if ($('#myId input').is(':checked')) {
    // Get text from label parent
    console.log($('#myId label').text());
  } else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <!-- First class -->
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <!-- Second class -->
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>
<button id="result">Result</button>

Answer 1

为此，您可以用于map()遍历所有:checked复选框并构建父label元素的文本值数组。尝试这个：

$('#result').click(function() {
  var labels = $('#myId :checked').map(function() {
    return $(this).closest('label').text();
  }).get();
  
  console.log(labels);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>
<button id="result">Result</button>