複選框檢查觸發器多個必填字段

Question

我創建了一個帶複選框的jQuery表單，當選中時，它將顯示下拉菜單。但是，如果選中相同的複選框，除了顯示下拉菜單外，我還需要它還要求完成Discussion textarea字段。這是我到目前爲止有：

<style type="text/css"> 
* { font-family: Verdana; font-size: 96%; } 
label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 
.submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("#fourthselection").change(function(){  
      var showOrHide =$(this).is(':checked');   
       $("#togg").toggle(showOrHide);  
     }); 
    }); 
</script> 

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("#serviceForm").validate(); 
    }); 
</script> 
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<form id="serviceForm" action="#" onSubmit="required(this);" method="POST"> 
<input name="orgid" type="hidden" value="000001" /> 
<input name="retURL" type="hidden" value="#" /> 
<label for="company">* Company</label><br /> 
<input id="company" class="required" maxlength="80" name="company" size="80" type="text" /><br /> 
<br /> 
<label for="name">* Name</label><br /> 
<input id="name" class="required" maxlength="80" name="name" size="80" type="text" /><br /> 
<br /> 
<label for="email">Email</label> <br /> 
<input id="email" maxlength="80" name="email" size="80" type="text" /><br /> 
<br /> 
<label for="phone">Phone</label><br /> 
<input id="phone" maxlength="40" name="phone" size="20" type="text" /><br /> 
<br /> 
<br /> 
Make selection?<br /> 
<input id="firstselection" name="firstselection" type="checkbox" value="1" /> First selection <br /> 
<input id="secondselection" name="secondselection" type="checkbox" value="1" /> Second selection<br /> 
<input id="thirdselection" name="thirdselection" type="checkbox" value="1" /> Third selection <br /> 
<input id="fourthselection" name="fourthselection" type="checkbox" value="1" /> Fourth selection <br /> 
<span id="togg" style="display:none"> 
If fourth selection, please make a selection? 
<select id="fourthchoices" name="fourthchoices" title="Fourth selection choices"> 
<option value="">--Please Select One--</option> 
<option value="Choice A">Choice A</option> 
<option value="Choice B">Choice B</option> 
<option value="Choice C">Choice C</option> 
<option value="Choice D">Choice D</option> 
<option value="Choice E">Choice E</option> 
<option value="Choice F">Choice F</option> 
<option value="Choice G">Choice G</option> 
<option value="Choice H">Choice H</option> 
</select><br> 
</span> 
<input id="selection" name="selection" type="checkbox" value="1" /> Fifth selection<br /> 
<input id="sixthselection" name="sixthselection" type="checkbox" value="1" /> Sixth selection<br /> 
<input id="otherselection" name="otherselection" type="checkbox" value="1" /> Other 
<br /> 
<br /> 
<span id="togg2" style="display:inline"> 
<label for="description">Description</label> <br /> 
(if Fourth selection, please include more information)<br /> 
<textarea name="description" id="description" cols="80" rows="5"></textarea><br /> 
<br /> 
<br /> 
</span> 
<input name="submit" type="submit" /> 
</form> 

Answer 1

這裏是你的答案：

$("#fourthselection").change(function(){  
    $("#togg").toggle(this.checked); 
    $("#description").toggleClass("required"); 
}); 
$("#serviceForm").validate(); 

這裏是working example。

儘可能使用本機javasript，如;您可以使用this.checked訪問複選框狀態。如果您在jsFiddle或某個同等網站上準備您的問題，這將是非常好的。