从检查的输入中获取标签

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>

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

循环或映射检查输入和抢父母或最接近的标签

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

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

如果你只需要选中的复选框标签文本，我只想问他们;）

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

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