Get shortcut from marked input
I want to get a label .text()
from checked inputs. Actually, my code checks if the input is checked and then gets a label from each <li>
with the same class, not just the checked ones. How can I achieve this? I think I should be using the .parent () or .child () attribute, but I don’t know how.
I have tried with alert($('#myId input').parent('label').text());
but with no success.
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>
For this you can use map()
to cycle through all checkboxes :checked
and build an array of text values of the parent element label
. Try the following:
$('#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>
$('#result').click(function() {
// If an input is checked
$('#myId input').each(function() {
if($(this).is(":checked")) {
console.log($(this).parent().text());
}
})
});
Rory's alternate answer. Just checks each input if checked (slightly easier to read and understand, but does the same).
Complete or display checked inputs and grab parent or closest label
$('#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>
If you only want text for the checked checkbox labels I would just ask for them;)
$('#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>