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元素的文本值数组。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

$('#result').click(function() {
  // If an input is checked
  $('#myId input').each(function() {
      if($(this).is(":checked")) {
        console.log($(this).parent().text());
      }
  })
});

Rory回答的替代方案。如果检查了每个输入，只需检查它们（更容易阅读和理解，但完全相同）。

Answer 3

循环或映射选中的输入并抓取父标签或最近标签

＆＃13;

$('#result').click(function() {
  // If an input is checked
  var result = [];
  $('#myId input:checked').each(function() { // or map
    result.push($(this).parent().text())
  });
  console.log(result);
});

＆＃13;

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

＆＃13;

Answer 4

如果您只需要选中复选框标签的文本，我只会要求它们;）

＆＃13;

$('#result').click(function() {
  var $checkedInputs = $('input:checked');
  
  if ($checkedInputs.length !== -1) {
    $checkedInputs.each(function (i) {
      alert($checkedInputs.eq(i).parent().text());
    });
  }
});

＆＃13;

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

＆＃13;

从选中的输入中获取标签

4 个答案: