Hi, Thanks, you seem to be a jQuery guru, the solution works. I've applied it to work on checkbox now ;-) and now trying to have a set of checkbox display when one of the radio button is selected and hide them when another is selected.
So like from below example, I select if its public or private and if private display checkbox set, I am able to hide it on load when public is selected and vice versa, but the same does not work when I change the private/public radio button, below is the code I've tried and like to know if I am on the right path. ------------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery- latest.js"></script> <script> $(document).ready(function(){ $("input[type=radio]:checked + label").addClass("hilite"); $("input[type=radio]").change(function () { $(this).parent().find("label.hilite").removeClass("hilite"); var id = $(this).attr("id"); $("label[for="+ id + "]").addClass("hilite"); }); $("input[type=radio]:checked[value='public']").parent().find ("div.tags").css("display","none"); $("input[type=radio]:checked[value='private']").parent().find ("div.tags").css("display","block"); $("input[type=checkbox]:checked + label").addClass("hilite"); $("label").click(function () { $(this).toggleClass("hilite"); }); }); </script> <title>Radio Toggle</title> <style type="text/css"> label { color:black; margin:5px 1px; cursor:pointer;padding:2px 5px; } label.hilite { background:blue;color:white; } </style> </head> <body> <form action="" method="get"> <fieldset id="f1"> <input name="radio-button-1" type="radio" value="public" id="yes" checked="checked" /><label for="yes">public</label> <input name="radio-button-1" type="radio" value="private" id="no" / ><label for="no">private</label> <div style="display:none;margin-top:10px;" class="tags"> <input name="" type="checkbox" value="" id="friends" /><label for="friends">friends</label> <input name="" type="checkbox" value="" id="family" / ><label for="family">family</label> <input name="" type="checkbox" value="" id="work" / ><label for="work">work</label> </div> </fieldset> <fieldset id="f2"> <input name="radio-button-2" type="radio" value="public" id="yes1" / ><label for="yes1">public</label> <input name="radio-button-2" type="radio" value="private" id="no1" checked="checked" /><label for="no1">private</label> <div style="display:none;margin-top:10px;" class="tags"> <input name="" type="checkbox" value="" id="friends-1" /><label for="friends-1">friends</label> <input name="" type="checkbox" value="" id="family-1" / ><label for="family-1">family</label> <input name="" type="checkbox" value="" id="work-1" / ><label for="work-1">work</label> </div> </fieldset> </form> </body> </html> ------------------------------------- And also the hilite class get applied to radio I select, but when I click on the checked radio again the hilite class is removed even though the radio is checked, is there a way to keep the hilite class applied as long as the radio button is checked. Thanks!
