javascript - Determine Condition Using JScript -
guys how can have maximum of 3 checkbox page?
currently,i have 6 checkbox..if tick 6 boxes...3 tables displayed on top , 3 displayed bottom.however want have 3 maximum tables appeared.
therefore,i thinking have check condition (1)if 1 check box ticked only.it notify user minimum of 2 tables must checked make comparison.-done
(2)if more 3 tables selected.it notify user not proceed , not bring tables.-need here
<!doc html> <html> <title></title> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type="submit"]').click(function () { if($('input[name=option]:checked').length >1) { $('.frame-wrapper').fadeout(); $('input[name=option]').each(function() { if ($(this).prop("checked")) { $('.frame-wrapper').eq( $(this).index() -1 ).fadein(); } }); } else { alert("you must compare more 1 item.!!"); } }); $('input[type="compare"]').click(function () { $('.frame-wrapper').eq( $(this).index() -1 ).fadein(); }); }); </script> <style type="text/css"> .frame-wrapper { display: none; float: left; width: 32%; margin-top: 20px; margin-right: 1%; background-color: #eee; } </style> </head> <body> <b>please select option</b> <input type="checkbox" name="option" /> b <input type="checkbox" name="option" /> c <input type="checkbox" name="option" /> d <input type="checkbox" name="option" /> e <input type="checkbox" name="option" /> f <input type="checkbox" name="option" /> <input type="submit" value="compare"/> <input type="reset" name="clear" value="clear"/> <div style="clear: both;"></div> <div id="tbla" class="frame-wrapper"> selected </div> <div id="tblb" class="frame-wrapper"> selected b </div> <div id="tblc" class="frame-wrapper"> selected c </div> <div id="tbld" class="frame-wrapper"> selected d </div> <div id="tble" class="frame-wrapper"> seleted e </div> <div id="tblf" class="frame-wrapper"> selected f </div> </body> </html>
add class input checkboxes (.foo example).
then can do
$('.foo').click(function() { //every time checkbox clicked can run sum checks. //you can loop on '.foo' classes , check how many checked. //then run if statement more dirty work. });
Comments
Post a Comment