從檢查的輸入中獲取標籤

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>