带有复选框和 div 的 jQuery 调试和选择器辅助

Question

我的页面上有多个包含复选框的表格。紧跟在表格后面的是一个默认隐藏的 div。我想根据复选框选择显示/隐藏 div。

由于我有大约 10 个这样的结构，我想找到一种方法来创建单击选择来处理任何被单击的选择。

HTML：

<table>  
<input id='cbChecklist1'>  
</table>

<div id='divChecklist1'>  
Show/Hide  
</div>

所以我有 cbChecklist1-cbChecklist10 和 divChecklist1-divChecklist10。当具有CBChecklistx的选项卡中的复选框时，我希望它显示/隐藏相应的divchecklistx。

谢谢！

@@@@@@@@@@@@@@@@@@EDIT@@@@@@@@@@@@@@@@@@

我已经改变了我的复选框和表格的设计，我正在尝试使用 slideDown、slideUp 方法，但似乎我没有正确选择我的正确<div>——至少它是不上下滑动<div>。

2 个问题： 1. 我是否正确修改了<div> 选择器？ 2. 我该如何调试才能知道选择是如何工作的？

更新的 HTML：

<table>  
<input id='cbPressueChecklist'>  
</table>

<div id='divPressueChecklist'>  
Show/Hide  
</div>


<table>  
<input id='cbMechanicalChecklist'>  
</table>

<div id='divMechanicalChecklist'>  
Show/Hide  
</div>

我的 jQuery 代码：

$('input[id$=Checklist]').change(function()  
{  
    var divId = '#div' + this.id.substring(2);  
    if (this.checked)  
        $(divId).slideDown(1500);  
    else  
        $(divId).hide(1500);  
});

再次感谢。

Answer 1

$('input[id^=cbChecklist]').change(function() {
    var divId = '#divChecklist' + this.id.match(/\d+$/)[0];
    $( divId ).toggle( this.checked );
});

这会将a .change() event handler 绑定到<input> 元素，其中ID 为attribute starts with cbChecklist。

当发生更改事件时，它会从其 ID 中提取数字，并将其连接到 #divChecklist 以创建选择器。

然后.toggle() is called在相关的<div>上，传递this.checked作为开关，这样如果选中该框，它将show<div>，否则它将hide。