0
我有一个复选框的列表,我希望他们的内容切换时检查。我用jQuery写了它,但我想以某种方式优化我的代码,而不必为每个复选框编写函数。多个复选框切换使用jquery
$(document).ready(function() {
$("#purpose-1").click(function() {
$("#purpose-detail-1").toggle(this.checked);
}).triggerHandler('click');
$("#purpose-2").click(function() {
$("#purpose-detail-2").toggle(this.checked);
}).triggerHandler('click');
$("#purpose-3").click(function() {
$("#purpose-detail-3").toggle(this.checked);
}).triggerHandler('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="checkbox" id="purpose-1">Exhibition
<ul id="purpose-detail-1">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Opening Date:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="purpose-2">Publication
<ul id="purpose-detail-2">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="purpose-3">Event
<ul id="purpose-detail-3">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Event Date:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Event Time:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
</ul>
谢谢您的回答。我还有一个问题,如果'ul'不是'input'之后的下一个直接元素呢? – 2015-02-10 20:02:02
如果它在同一个元素中,可以使用'$(this).parent()。find('ul')...'查看更新的答案 – 2015-02-10 20:05:46