取消選中使用jquery檢查複選框

Question

我需要編寫一個函數，該函數將「取消」在組中的舊的「已選中」框。基本上，是A組和B組，並且一旦來自A組的項目被檢查並提交，它就會顯示來自A組的項目以及與B組同樣的項目。但問題在於，當選擇並顯示來自A組的項目時，與B組相同的東西。組A的項目仍然顯示出來。 jQuery中有沒有內置的函數可以實現。該代碼是建立在http://jsfiddle.net/rexonms/mJgcK/

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 

}); 
});​ 

Answer 1

只需添加以下行

$(".options [type=checkbox]").attr('checked', false); 

在$('.selectOne').change()

當列表選擇更改時，將取消選中所有複選框。

DEMO

Answer 2

我不知道，如果你還在尋找答案，但你可以看到它在這個demo

我只是連接到其點擊事件的每複選框這樣你可以刪除另一組選中的複選框以這種方式選擇任何組，而不用擔心取消選中的複選框