Ok, I updated it. I made it Very jQuery. $("input[type=checkbox]").click(function(){ divClass = $(this).attr("class");
if ($(this).is(":checked")) { $("#" + divClass).show(); } else if($(this).not(":checked")) { $("#" + divClass).hide(); } }); I refactored it three times. I kept thinking, "hmm, I think this should be shorter". I think there is probably a way to make it even shorter with Toggle. Anyone? Glen On Dec 6, 2007 8:22 PM, Glen Lipka <[EMAIL PROTECTED]> wrote: > Ahh, I think I get it. > > Input 1 and 2 both are controlling the first div. > Input 3 controls div 2 > input 4 controls div 3 > input 5 controls div 4 > > Yes? I can modify the demo. > > Glen > > > On Dec 6, 2007 2:46 PM, Ryan <[EMAIL PROTECTED]> wrote: > > > > > This part works: > > Select X, get Div 1 > > or > > Select Y, get Div 1 > > or > > Select X and Y, get Div1 > > > > This part doesn't: > > When X and Y are selected, Div1 is showing > > If X is unselected and Y remains selected, Div1 is still showing > > > > Basically, if X and Y are selected and then X is unselected, I want > > Div1 to remain showing because Select Y, get Div1 still holds true. > > This is where I'm having a problem. When X is unselected, it hides > > Div1. Make sense? > > > > > > > > On Dec 6, 3:37 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote: > > > I dont get it. :) > > > > > > Say it again as a use case: > > > 1. click on X > > > 2. expect results: div Y does something. > > > > > > Glen > > > > > > On Dec 6, 2007 11:22 AM, Ryan < [EMAIL PROTECTED]> wrote: > > > > > > > > > > > > > Actually, what I need it to do is show one instance of Div 4, not > > > > two. I'm using the div for a text field, so I only need to show one > > > > > > version of it. The checkboxes showing the div are independent of > > each > > > > other in value, but have the same corresponding text field which > > > > should be filled out if either or both of these checkboxes are > > > > selected. Does that make sense? > > > > > > > On Dec 6, 12:36 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote: > > > > > I whipped a demo. Does this do what you > > > > want?http://www.commadot.com/jquery/checkBoxShow.php > > > > > > > > Couple of tips: > > > > > > > > 1. Try to avoid putting onclick handlers in your html. jQuery > > does > > > > > this really easily and makes your html easier to read. > > > > > 2. getElementByID can be expressed as > > $("#yourID").dosomething... > > > > > Much more concise and jQuery-ish. :) > > > > > 3. The toggle function will automatically show if hidden and > > hide if > > > > > shown without the IF shatement. > > > > > > > > Hope these help. When I first started jQuery, I had to forget > > > > everything I > > > > > knew about JS (which wasn't much). It just did it all without the > > muss. > > > > > > > > Glen > > > > > > > > On Dec 6, 2007 8:30 AM, Ryan <[EMAIL PROTECTED]> wrote: > > > > > > > > > I'm completely versed in the show/hide options available, but > > have a > > > > > > problem I haven't been able to figure out. I'm hoping jquery > > will have > > > > > > the answer. I have 5 checkbox input options, the first two > > options > > > > > > providing the same show div. For example, > > > > > > > > > <html> > > > > > > > > > <head> > > > > > > <script type="text/javascript"> > > > > > > <!-- > > > > > > function showMe (it, box) { > > > > > > var vis = (box.checked) ? "block" : "none"; > > > > > > document.getElementById(it).style.display = vis; > > > > > > } > > > > > > //--> > > > > > > </script> > > > > > > </head> > > > > > > > > > <body> > > > > > > > > > <form> > > > > > > <input type="checkbox" name="modtype" value="value1" > > > > > > onclick="showMe('div1', this)" />value1 > > > > > > > > > <input type="checkbox" name="modtype" value="value2" > > > > > > onclick="showMe('div1', this)" />value2 > > > > > > > > > <input type="checkbox" name="modtype" value="value3" > > > > > > onclick="showMe('div2', this)" />value3 > > > > > > > > > <input type="checkbox" name="modtype" value="value4" > > > > > > onclick="showMe('div3', this)" />value4 > > > > > > > > > <input type="checkbox" name="modtype" value="value5" > > > > > > onclick="showMe('div4', this)" />value5 > > > > > > > > > <div class="row" id="div1" style="display:none">Show Div 1</div> > > > > > > <div class="row" id="div2" style="display:none">Show Div 2</div> > > > > > > > > <div class="row" id="div3" style="display:none">Show Div 3</div> > > > > > > <div class="row" id="div4" style="display:none">Show Div 4</div> > > > > > > > > </form> > > > > > > > > > </body> > > > > > > > > > </html> > > > > > > > > > As you can see, the first two options should show the same div. > > > > > > Selecting one or both isn't a problem, the div appears as > > should, but > > > > > > when deselecting one of the checkboxes, the div disappears even > > though > > > > > > one of the checkboxes is still selected. > > > > > > > > > Does anyone have an idea as to how I can get the div to remain > > > > > > selected when one of the two checkboxes is deselected? Or, if > > either > > > > > > of the checkboxes are selected, to provide just one result? > > > > > > > > > Thanks! > > > >