unchecking checked check boxes using jquery
<p>I need write a function that will "uncheck" the old "checked" boxes with in a group. Basically, are group A and group B and once items from group A is checked and submitted, it shows the items from group A and same thing with group B. But the issue is when item from group A is selected and displayed and you do the same thing from group B. The items form group A still shows up. is there any built in function in jQuery that will do the trick. The code is set up at <a href="http://jsfiddle.net/rexonms/mJgcK/" rel="nofollow">http://jsfiddle.net/rexonms/mJgcK/</a></p>

<p>HTML</p>

<pre><code>&lt;h1&gt;Find Services You Need&lt;/h1&gt;
&lt;select class="selectOne"&gt;
&lt;option&gt;Please Select One&lt;/option&gt;
&lt;option name="one"&gt;Basic Needs&lt;/option&gt;
&lt;option name="two"&gt;Disabilities Services for Adults&lt;/option&gt;

&lt;/select&gt;&lt;!--selectOne--&gt;



&lt;div class="options"&gt;
&lt;div class="option one"&gt;
    &lt;h3&gt;Basic Needs&lt;/h3&gt;
    &lt;input type="checkbox" name="oneA"&gt;Employment services&lt;br&gt;
    &lt;input type="checkbox" name="oneB"&gt;Financial assistance&lt;br&gt;
    &lt;input type="checkbox" name="oneC"&gt;Food&lt;br&gt;
    &lt;input type="checkbox" name="oneD"&gt;Housing&lt;br&gt;
    &lt;input type="checkbox" name="oneE"&gt;Legal issues&lt;br&gt;
&lt;/div&gt;&lt;!--optionOne--&gt;

&lt;div class="option two"&gt;
    &lt;h3&gt;Disabilities Services for Adults &lt;/h3&gt;
    &lt;input type="checkbox" name="twoA"&gt;Advocacy&lt;br&gt;
    &lt;input type="checkbox" name="twoB"&gt;Coordinated Care&lt;br&gt;
    &lt;input type="checkbox" name="twoC"&gt;Employment Support&lt;br&gt;
    &lt;input type="checkbox" name="twoD"&gt;Housing&lt;br&gt;
    &lt;input type="checkbox" name="twoE"&gt;Recreation &amp; Social Activities&lt;br&gt;
    &lt;input type="checkbox" name="twoF"&gt;Referrals &amp; Financial Options&lt;br&gt;
    &lt;input type="checkbox" name="twoG"&gt;Services for the Deaf and Hard of Hearing&lt;br&gt;
&lt;/div&gt;&lt;!--optionOne--&gt;


&lt;/div&gt;&lt;!--options--&gt;

&lt;div id="showMeContainer"&gt;&lt;div id="showMe"&gt;Show Me&lt;/div&gt;

&lt;/div&gt;&lt;!--button--&gt;


&lt;div class="answers"&gt;
&lt;div class="answerTitle"&gt;&lt;h3&gt;Title Here&lt;/h3&gt;&lt;/div&gt;&lt;!--answerTitle--&gt;

&lt;div class="one"&gt;

    &lt;div class="oneA answer"&gt;
        &lt;p&gt;Employment services&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneA--&gt;
    &lt;div class="oneB answer" &gt;
        &lt;p&gt;Financial assistance&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneB--&gt;
    &lt;div class="oneC answer"&gt;
        &lt;p&gt;Food&lt;/p&gt;        
    &lt;/div&gt;&lt;!--oneC--&gt;
    &lt;div class="oneD answer"&gt;
        &lt;p&gt;Housing&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneD--&gt;
    &lt;div class="oneE answer"&gt;
        &lt;p&gt;Legal Issues&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneE--&gt;
&lt;/div&gt;&lt;!--answer--&gt;

&lt;div class="two"&gt;
    &lt;div class="twoA answer"&gt;
        &lt;p&gt;Advocacy&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneA--&gt;
    &lt;div class="twoB answer" &gt;
        &lt;p&gt;Cordinated Care&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneB--&gt;
    &lt;div class="twoC answer"&gt;
        &lt;p&gt;Employment Support&lt;/p&gt;        
    &lt;/div&gt;&lt;!--oneC--&gt;
    &lt;div class="twoD answer"&gt;
        &lt;p&gt;Housing&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneD--&gt;
    &lt;div class="twoE answer"&gt;
        &lt;p&gt;Recreation &amp; Social Activities&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneE--&gt;
    &lt;div class="twoF answer"&gt;
        &lt;p&gt;Referrals &amp; Financial Options&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneF--&gt;
    &lt;div class="twoG answer"&gt;
        &lt;p&gt;Services for the Deaf and Hard of Hearing&lt;/p&gt;
    &lt;/div&gt;&lt;!--oneF--&gt;
&lt;/div&gt;&lt;!--two--&gt;


&lt;/div&gt;&lt;!--answers--&gt;​
</code></pre>

<p>And the jQuery 1.2.6 (I don't have privilege to use newer version)</p>

<pre><code>$(document).ready(function(){

$('.option').hide();//Hiding all options
$('.answer').hide(); //Hiding all the answers   
$('#showMeContainer').hide(); //Hiding the show me button
$('.answerTitle').hide();


$('.selectOne').change(function(event){


    var name = $('.selectOne option:selected').attr('name');
    //alert(name);
    $('#showMeContainer').hide(); 
    $('.option').hide();
    $('.' + name).show();
    $('#showMeContainer').show(); 


});

$('#showMe').click(function(event) {  
    $('.answer').hide();
    $('.answerTitle').hide();
    var checked = $('.option').find(':checked');
    $.each(checked, function() {
        var name = this.name;
        $('.' + name).show();
         $('.answerTitle').show();

    });

    var x = $('#compBody').height() + 50;// Getting the height on the div
    $('#pageBody').css('height',x); // updating the height of the outer div

});
});​
</code></pre>
