我有几个复选框,选中后会显示一个隐藏的 div。有没有办法编写一个 jquery 函数,根据复选框是否选中隐藏的 div 来显示或隐藏?
只使用javascript
<input type="checkbox" name="box1" id="box1" onclick="function toggle('div1')">
<div id='div1'>
.....
</div>
<input type="checkbox" name="box2" id="box2" onclick="function toggle('div2')">
<div id='div2'>
.....
</div>
<script>
function toggle(id) {
if (this.checked) show(id);
else hide(id);
}
其中show()
和hide()
是定义改变id显示属性的函数。
在 jquery 中有什么方法可以做到这一点,我将切换绑定(bind)到复选框,然后让它切换以某种方式传递的 id?
最佳答案
您可以尝试创建一个小的 jQuery 插件:
$.fn.toggleCheckboxContainer = function(selector) {
var toggleObject = $(selector);
return $(this).each(function() {
$(this).change(function() {
$(this).is(':checked') ? toggleObject.show() : toggleObject.hide();
});
});
};
$(function() {
$('#box1').toggleCheckboxContainer('#div1');
$('#box2').toggleCheckboxContainer('#div2');
});
jsFiddle example
关于javascript - 带参数的jquery函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4373089/