HOW TO: If enclosing div class is X, then clear form field inside?

Discussion in 'JavaScript' started by j0563, Nov 11, 2010.

  1. #1
    I have a small bit of code that shows/hides form fields based on what is selected in a select box:

    
    <script type="text/javascript">
    $(document).ready(function(){
    
    $('[class^=is]').hide();
    
    $("#recip").change(function(){          
        var value = $("#recip option:selected").val();
        var theDiv = $(".is" + value);
        
        theDiv.slideDown();
        theDiv.siblings('[class^=is]').slideUp();
    
    }); // End function
    
    }); // End doc ready
    
    </script>
    
    HTML:
    And the page:

    
    	<select id="recip">
    		<option value="" selected="selected">Select One</option>
    		<option value="1">Entire Store(s)</option>
    		<option value="2">Entire Group(s)</option>
    		<option value="3">Employee(s)</option>
    	</select>
    
    <div class="clear"> </div>
    
    	<div class="is1">
    	<label>Choose Store(s):</label>
    	<input type="text" name="rec_store">	
    	
    	<div class="clear"> </div>
    	</div><!-- end is1-->
    
    	<div class="is2">
    	<label>Choose Group(s):</label>
    	<input type="checkbox" name="rec_group" value="first_group">First Group<br />
            <input type="checkbox" name="rec_group" value="second_group">Second Group<br />
    	
    	<div class="clear"> </div>
    	</div><!-- end is2-->
    
    	<div class="is3">
    	<label>Choose Employee(s):</label>
    	<input type="checkbox" name="rec_id" value="first_emp">First Employee<br />
            <input type="checkbox" name="rec_id" value="second_emp">Second Employee<br />
    	
    	<div class="clear"> </div>
    	</div><!-- end is3-->
    
    HTML:
    It's just an example, but you can see that if the first select box is set to "Entire Group(s)", the group checkboxes will appear. This is working fine, however, let's say someone checks off a few groups, then changes the select box to "Employee(s)" to show the employee checkboxes.

    What I need to do is check all the hidden fields for any values the user may have previously checked (or inputted into a textbox) when it was showing and clear them. So, if the user checks off a few groups but then goes on to check off a few employees, the group checkboxes he checked will be cleared.

    Any ideas??
     
    j0563, Nov 11, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Set checked attribute to false for all checkboxes.
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    $('[class^=is]').hide();
    
    $("#recip").change(function(){          
        var value = $("#recip option:selected").val();
        var theDiv = $(".is" + value);
    
        [COLOR="blue"]$("input:checkbox").attr("checked", false);[/COLOR]
        theDiv.slideDown();
        theDiv.siblings('[class^=is]').slideUp();
    
    }); // End function
    
    }); // End doc ready
    </script>
    
    Code (markup):
     
    Cash Nebula, Nov 14, 2010 IP