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>
source to share
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>
source to share
$('#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).
source to share
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>
source to share
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>
source to share