Javascript 带参数的jquery函数
我有几个复选框,当选中时会显示隐藏的div。有没有一种方法可以编写一个jquery函数,根据复选框是否选中隐藏的div来显示或隐藏它 仅使用javascriptJavascript 带参数的jquery函数,javascript,jquery,Javascript,Jquery,我有几个复选框,当选中时会显示隐藏的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=
<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);
}
.....
.....
功能切换(id){
如果(选中此项)显示(id);
else隐藏(id);
}
其中show()
和hide()
是用于更改id的显示属性的函数
在jquery中,我将切换绑定到复选框并让它切换以某种方式传递的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');
});
您可以尝试创建一个小型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');
});
+1,我喜欢!这是我将要写的非常好的方式:)+1。但我不会在“#”前面加上前缀,而是传入整个选择器。这会使它更灵活。当复选框被选中或取消选中时,这会起作用吗?像事件处理程序一样?太好了!非常感谢。我喜欢JSFIDLE示例,这才是真正为我所做的。+1,我喜欢它!这是我将要写的非常好的方式:)+1。但我不会在“#”前面加上前缀,而是传入整个选择器。这会使它更灵活。当复选框被选中或取消选中时,这会起作用吗?像事件处理程序一样?太好了!非常感谢。我喜欢JSFIDLE示例,这正是它真正为我做的。