So, if u want hide when the radio change add this to your input radio change
event.
if ( $(this).val() == "public" )
$(this).parent().find("div.tags").hide();
else
$(this).parent().find("div.tags").show();
The behavior for checkbox is the same as the radio button. So, applied
change event to checkbox and not click event to label.
$("input[type=checkbox]").change(function () {
//do your hilite stuff here. Is the same idea as the radio buton.
});
On Thu, Mar 12, 2009 at 14:38, mdjamal <mail4ja...@gmail.com> wrote:
>
> 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 <http://code.jquery.com/jquery-%0Alatest.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!
>
>
