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
});
});