Why doesn't this print out the text of the span, "Apple "?
<label class="search-recipe-chkbox fruitLabel">
<input type="checkbox" class="checkbox check-box-mob-filters check-box-desktop" id="12DSKT" name="Apple" value="12">
<span class="checkmark"></span>
<span class="ingredient-label">Apple <span class="recipe-count" id="12numDSKT">(1)</span></span>
</label>
for (var checkbox of checkboxes) {
if (checkbox.checked == true) {
console.log($(checkbox.id).siblings('.ingredient-label').text());
}
}
checkboxes is just all the checkboxes (input) in the form and given that Apple is checked.
Thank you
Check the checkbox.id - in the console.log
It needs to have a # in the front:
for (var checkbox of checkboxes) {
if (checkbox.checked == true) {
console.log($('#'+checkbox.id).siblings('.ingredient-label').text()); // like this
}
}
Edit
Here's a better solution as told by Teemu. Only checkbox also works:
for (var checkbox of checkboxes) {
if (checkbox.checked == true) {
console.log($(checkbox).siblings('.ingredient-label').text()); // like this
}
}
There are multiple reasons that this could occur, however here is my solution to your problem.
for (var checkbox of checkboxes) {
if (checkbox.checked) {
var val = checkbox.parentElement.querySelector('.ingredient-label').textContent;
console.log(val);
}
}
You can also use - console.log($("[id]").siblings('.ingredient-label').text());