I have an unordered list, each < li >
has an input of type < checkbox >
. It also has an anchor tag with <a href >
property. A:href
has been dynamically built based on user input.
I want to traverse the < li >
list, find the checked inputs and get the href
of only those checked inputs.
<ul>
<li><input type="checkbox"><a href="#">Link 1</a></li>
<li><input type="checkbox"><a href="#">Link 2</a></li>
</ul>
The logic in pseudo code is:
for all li
if checkbox is checked
get anchor property href
The problem is when I use the $ ( "a" )
and all its alternatives :checked
, li.active input:checkbox
, $( "ul li checkbox:checked a" )
, $this.children(":checked").each(function(){ ...etc}
the DOM will return all the anchors not just the anchors of the :checked
inputs. It will not traverse the list within the list. It will exit the range of checked list items every time.
Some of the solutions I tried are as follows:
1
$( ":checkbox:checked" ).prop( true , function(){
$( "a" ).css( "background-color","yellow" );
});
2
$(":checkbox:checked").each(function (){
window.open($(".myID")
.attr("href"))
});
3
$('li').each(function(){
//go to li children
var $this = $(this);
$this.children(":checked").each(function(){
$this; // parent li
$this.css( "background-color","green" ); //works until here
var $childs = $this.children(":checked");
$childs.children("a").each(function(){ //undefined
//PRINT OUT HREF OF A (DID NOT WORK EITHER)
});
});
4
$('#li.active input:checkbox').on('change', function () {
getAllValue()
});
function getAllValue() {
var sThisVal = $(':checkbox:checked').map(function () {
return this.value;
}).get();
alert(sThisVal);
}
I am realizing (correct me if its wrong) that $("selector")
cannot be used to combine conditions of two parent> child tags ie.. $("a[href] :checkbox:checked") will return all anchors and all input checked boxes. Same goes for if statements. I thought .children()
function may get me objects but that don't seem to work like I would expect them to the input
type checkbox
since it does not have a closing tag (? this is a guess)
I do not want to touch the html schema because it is dynamically built and this is the final stage of the project.
I'd like to thank everyone for being so helpful here. I have been trying to find the answer to my question for 3 days now. So please do not hit me with the "this was answered before" because believe me, I tried all proposed answers and it didn't work because this case is different.
Your structure corresponds to this CSS selector:
li > :checked + a
^ ^ ^ ^ ^
| | | | -- an <a> element
| | | |
| | | ---- which directly follows
| | |
| | --------- an element currently checked (<input>)
| |
| --------------- which is a direct child of
|
------------------ an <li> element
So just use it then iterate over the matching <a>
elements
button.onclick = function(evt) {
$('li > :checked + a').each(function(i, el) {
console.log(el.getAttribute('href'));
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
<li><input type="checkbox"><a href="/link1">Link 1</a></li>
<li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>
And if you're only dealing with newest browsers, then you can do it without library:
button.onclick = (evt) => {
[... document.querySelectorAll('li > :checked + a')]
.forEach( (el) =>
console.log( el.getAttribute('href') )
);
};
<button id="button">click</button>
<ul>
<li><input type="checkbox"><a href="/link1">Link 1</a></li>
<li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>