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或某个同等网站上准备问题，那就非常好。

选中复选框会触发多个必填字段

1 个答案: