Find Deeply Nested Input By Jquery

Solution 1:

What's wrong with:

$('.parent')

or

$('input .parent')

To your update:

$('#customerServices input:checkbox[class="parent"]');

selects the checkbox where class equals "parent". But your class attribute contains much more. You need:

$('#customerServices input:checkbox.parent');

update 2:

$('#customerServices input:checkbox:not(.parent)');

Solution 2:

You should be able to select the elements you want with

$("input:checkbox.parent")

There is no immediately obvious reason of getting involved with the <div id="customerServices">, but if you want to cut down on the DOM traversal you can use the stricter

$("#customerServices input:checkbox.parent")

Finally, your previous solution of

$('#customerServices input:checkbox[class="parent"]')

does not work because it only selects elements that only have the parent class, and not those that have additional classes. Since it's very unusual to have this exact requirement (I have never seen it in the wild), IMHO a selector like this should be considered a bug (even if it works at the time when it's written).

Solution 3:

Your code:

$('#customerServices input:checkbox[class="parent"]'); 

Does not work because you're using the "attribute equals" selector, which will look to match the entire value of the class attribute (and as you have multiple class names listed, it will look to match that entire string).

However, the class selector, ., will match an individual class name. You can therefore use the class selector, instead of the attribute selector and it should work:

$('#customerServices input:checkbox.parent');

Share