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="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中将切换绑定到复选框并使其以某种方式传递的ID绑定到jquery？

最佳答案

您可以尝试创建一个小的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