How can I select only checked inputs that are visible?

Question

I have multiple objects like below

<input type="checkbox" class="to-labelauty-icon labelauty" 
  name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" 
  data-label="false" id="labelauty-0001" value="tc_Login">

I'm using the code below to get all the checked objects, which give me all the elements which are checked regardless of their visible/hidden status.

$('input[class="to-labelauty-icon labelauty"]:checked')

How can I get only the visible and checked elements?

@isherwood Theoretically, it would match only those inputs with those two classes, in that order, in the HTML. Why that would be helpful is beyond me. — Heretic Monkey, Nov 27 '18 at 18:29

score 1 · Answer 1 · answered Nov 27 '18 at 18:27

1

You can use :visible selector and you can also combine the classes using dot selector notation

$('input.to-labelauty-icon.labelauty:visible:checked')

answered Nov 27 '18 at 18:27

charlietfl

170,828
13
121
150

this gives me `jQuery.fn.init [prevObject: jQuery.fn.init(1)] length: 0 prevObject: jQuery.fn.init [document] __proto__: Object(0)` in chrome console, I'm not getting the checked and visible elements using this – Dinesh Nov 27 '18 at 18:35
That is a log of the jquery object. You need to do something with that object. Provide a [mcve] and explantion of what you are trying to accomplish – charlietfl Nov 27 '18 at 18:37
`$('input[class="to-labelauty-icon labelauty"]:checked:hidden')` if I use this, then I get all the elements even the visible elements included. why is it that visible selector not working for this – Dinesh Nov 27 '18 at 18:39
Again...provide a full example ...as in jsfiddle, codepen, plunker etc – charlietfl Nov 27 '18 at 18:40

How can I select only checked inputs that are visible?

1 Answers1