0
Мне нужно написать функцию, которая «снимет» старые «отмеченные» поля в группе. В основном, это группа A и группа B, и как только элементы из группы A проверяются и отправляются, они показывают элементы из группы A и то же самое с группой B. Но проблема в том, что элемент из группы A выбран и отображается, и вы делаете то же самое из группы B. Элементы группы A все еще появляются. есть ли встроенная функция в jQuery, которая сделает трюк. Код устанавливается на http://jsfiddle.net/rexonms/mJgcK/снятие флажка с помощью jquery
HTML
<h1>Find Services You Need</h1>
<select class="selectOne">
<option>Please Select One</option>
<option name="one">Basic Needs</option>
<option name="two">Disabilities Services for Adults</option>
</select><!--selectOne-->
<div class="options">
<div class="option one">
<h3>Basic Needs</h3>
<input type="checkbox" name="oneA">Employment services<br>
<input type="checkbox" name="oneB">Financial assistance<br>
<input type="checkbox" name="oneC">Food<br>
<input type="checkbox" name="oneD">Housing<br>
<input type="checkbox" name="oneE">Legal issues<br>
</div><!--optionOne-->
<div class="option two">
<h3>Disabilities Services for Adults </h3>
<input type="checkbox" name="twoA">Advocacy<br>
<input type="checkbox" name="twoB">Coordinated Care<br>
<input type="checkbox" name="twoC">Employment Support<br>
<input type="checkbox" name="twoD">Housing<br>
<input type="checkbox" name="twoE">Recreation & Social Activities<br>
<input type="checkbox" name="twoF">Referrals & Financial Options<br>
<input type="checkbox" name="twoG">Services for the Deaf and Hard of Hearing<br>
</div><!--optionOne-->
</div><!--options-->
<div id="showMeContainer"><div id="showMe">Show Me</div>
</div><!--button-->
<div class="answers">
<div class="answerTitle"><h3>Title Here</h3></div><!--answerTitle-->
<div class="one">
<div class="oneA answer">
<p>Employment services</p>
</div><!--oneA-->
<div class="oneB answer" >
<p>Financial assistance</p>
</div><!--oneB-->
<div class="oneC answer">
<p>Food</p>
</div><!--oneC-->
<div class="oneD answer">
<p>Housing</p>
</div><!--oneD-->
<div class="oneE answer">
<p>Legal Issues</p>
</div><!--oneE-->
</div><!--answer-->
<div class="two">
<div class="twoA answer">
<p>Advocacy</p>
</div><!--oneA-->
<div class="twoB answer" >
<p>Cordinated Care</p>
</div><!--oneB-->
<div class="twoC answer">
<p>Employment Support</p>
</div><!--oneC-->
<div class="twoD answer">
<p>Housing</p>
</div><!--oneD-->
<div class="twoE answer">
<p>Recreation & Social Activities</p>
</div><!--oneE-->
<div class="twoF answer">
<p>Referrals & Financial Options</p>
</div><!--oneF-->
<div class="twoG answer">
<p>Services for the Deaf and Hard of Hearing</p>
</div><!--oneF-->
</div><!--two-->
</div><!--answers-->
И JQuery 1.2.6 (я не имею привилегию использовать более новую версию)
$(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
});
});