多个复选框使用jquery进行切换
Multiple checkboxes toggle using 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>
我会使用类,并使用next()
访问ul
的
$(document).ready(function() {
$(".my-ul").hide();
$(".my-checkbox").click(function() {
// in case the 'ul' is next to the checkbox:
// $(this).next('ul').slideToggle(this.checked);
// in case the 'ul' is in the same element but not next to the checkox:
$(this).parents('li').find('ul').slideToggle(this.checked);
// or maybe even better:
// $(this).closest('li').find('ul').slideToggle(this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<p> <input type="checkbox" class="my-checkbox"><strong>Exhibition</strong> </p> <ul class="my-ul">
<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 class="my-checkbox" type="checkbox" id="purpose-2">Publication
<ul class="my-ul" id="purpose-detail-2">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
<li>
<input class="my-checkbox" class="my-checkbox" type="checkbox" id="purpose-3">Event
<ul class="my-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>
使用一个类:
<input type="checkbox" class="purpose-checkbox" id="purpose-1">Exhibition
<ul class="purpose-detail" id="purpose-detail-1">
...
</ul>
然后在jQuery中:
$(".purpose").click(function() { // We choose elements with purpose class
var $this = $(this); // The purpose checkbox clicked
var purpose_detail = $(".purpose-detail", $this ); // Element with purpose-detail class inside the clicked checkbox
purpose_detail.toggle( $this.prop("checked") );
});
相关文章:
- jQuery复选框被锁定为选中状态
- Jquery复选框val数组
- jQuery复选框(在ul>li下)检查事件
- 使用 JQuery 复选框筛选项目列表
- jquery复选框仅在第一次加载时触发
- jQuery复选框未选中检测问题
- Jquery复选框更改事件未激发
- jQuery复选框和span共享一个单击事件
- jquery复选框树是否支持“;展开直到节点“;或“;扩展父母”;当程序地调用“;检查”;
- 显示 jQuery 复选框选择
- 没有表单的 jQuery 复选框验证
- 带有选项框架和WordPress的JQuery复选框
- jQuery - 复选框数据发布到 php
- jQuery复选框组选中/取消选中仅工作一次
- Jquery 复选框不起作用
- Jquery复选框分组 - 单击至少一个子复选框时取消选中父项,选中所有子复选框时选中父项
- 来自 HTML AJAX 响应的 jQuery 复选框控件
- jQuery复选框选中 单击按钮时切换
- Jquery 复选框筛选 - 修复
- Jquery复选框问题