Question

在页面中给出以下重复标记：

<div>
     <input type="checkbox" id="chk1" />
     <div id="div1" >
          //stuff to toggle
     </div>
</div>
<div>
     <input type="checkbox" id="chk2" />
     <div id="div2" >
          //stuff to toggle
     </div>
</div>

如何获取所有复选框，然后在每个复选框的事件处理程序中动态添加切换到关联的div？

$(document).ready(function() {
     $('input:checkbox').each(
          function() {
               $(this).bind('click", function() {
                    //Attach toggle() to associate DIV
                    //$('#div1').toggle();
               });
          });
});

有没有一种简单的方法可以做到这一点而无需解析或假设有序的ID列表？

Answer 1

使用change事件，因为这真的是您关心的事情
使用.live()，因此您只绑定1个侦听器，而不是每个复选框1个

使用DOM遍历查找<div>

$(function ()
{
    $('input:checkbox').live('change', function ()
    {
        $(this).next().toggle();
    });
});

Answer 2

您不需要each()或bind()：

$('input:checkbox').click(function (event) {
  //... using $(this)
});

需要选中所有复选框并为每个复选框动态添加特定事件处理程序

2 个答案: