How to get value from the first checkbox that is not hidden

Question

I need to get the value from a checkbox that is not hidden.

Here is my HTML and jQuery code

$(document).ready(function() { var maanu = $('.form').find('input[type=checkbox]:checked').filter(':first').val(); alert(maanu); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='form'> <input class="bills hide" type="checkbox" value="01" checked="checked" /> <br /> <input class="bills" type="checkbox" value="02" /> <br /> <input class="bills" type="checkbox" value="03" checked="checked" /> <br /> <input class="bills " type="checkbox" value="04" checked="checked" /> <br /> <input class="bills " type="checkbox" value="05" /> <br /> <input class="bills " type="checkbox" value="06" /> <br /> <input class="bills " type="checkbox" value="07" /> <br /> <input class="bills " type="checkbox" value="08" /> <br /> </div> 

Demo

Answer 1

Use the selector :visible :

 $('input:checkbox:checked:visible:first').val(); 

Answer 2

Try it - http://jsfiddle.net/xgQVG/6/

 $(document).ready(function(){ var maanu = $('.form').find('input[type=checkbox]:checked:not(:hidden)').filter(':first').val(); alert(maanu); }); 

Answer 3

This works and is very easy to read and understand:

 $('input').not('.hide').first().val(); 

Answer 4

Check out this answer. I think this may help you answer your jQuery question. If the DIV does not have the class "x"

Answer 5

It works:

 $('.form').find('input[type=checkbox]:checked').not('.hide').filter(':first').val(); 

Updated fiddle .