Question

我的页面上有大量的表单元素。我有114行12个文本框。每行文本框都有一个复选框，如果选中，则会隐藏文本框行。

我正在使用以下代码切换行div。

$(".chk201P").click(function(){
 $("#hide201P").toggle(!this.checked);
 }).triggerHandler('click');

$(".chk201M").click(function(){
 $("#hide201M").toggle(!this.checked);
 }).triggerHandler('click');

以上代码适用于2行。 chk201P和chk201M是复选框，hide201P和hide201M是被检查时隐藏的DIV。

**编辑：审核评论后，我稍微重新设计了页面。我现在使用以下代码突出显示我要隐藏的部分。这基于我在JQuery API站点上找到的代码。

$("form input:checkbox").wrap('<span></span>').parent().parent().siblings('.typentry').css({background:"yellow", border:"1px red solid"});

遵循这个逻辑，我试图使用以下内容使DIV隐藏并根据复选框返回，但它不起作用。

$("form input:checkbox").click(function() {
$(this.parent().parent().siblings('.typentry')).toggle(!this.checked);

}）triggerHandler（ '点击'）;

有谁能告诉我代码哪里出错了？

**结束编辑

考虑到行和文本框的数量，有没有更简单的方法来编写JQuery而不是为相应的数据复制上面的代码46次？

Old Example page New Example page

Answer 1

为什么不将相同的功能应用于每个复选框？如果我理解正确，你想隐藏父行吗？

$('input[type=checkbox]').click(function(){
    $(this).parent('tr').toggle($(this).is(':checked'));
});

此代码未经过测试，但我希望它能为您提供一个想法。

编辑：添加了'$（this）.is（'：checked'）'，因此只有选中复选框才能隐藏行。

在代码示例后编辑：好的，我只看了你的代码。请解释一件事，因为我无法弄清楚。你用div和span构建整个表。这是为什么？为什么不使用普通表呢？（我知道有很多原因，但我不知道你的是什么）。但令我震惊的是，在页面底部，您确实使用表格将2个锚标签对齐。为什么不在这里使用div？

此外，我建议您再次查看HTML。如果你想经常使用jQuery，那么将1个动作的受影响的dom元素放在同一个div中会更容易。我将在下面发布一个这样的例子。这是因为使用选择器更容易找到这些元素。

Example: (wrong way)
<div>
    <input type="checkbox">
</div>
<div>
    <input type="text">
</div>

(right way, atleast for me)
<div>
    <input type="checkbox">
    <input type="text">
</div>

我希望我已经告诉你了。如果你有任何问题。请随便问^^。

Answer 2

...解决

$("form input:checkbox").click(function() {
    var dataID = $(this).attr("id");
    $("#hide" + dataID).toggle(!this.checked);
    $("#nor" + dataID).toggle(this.checked);
    //return false;
}).triggerHandler('click');

解释......

94个复选框中的每一个都是由循环生成的，从数据库中提取信息。每个循环都会拉出特定的行ID。复选框的名称与这些ID匹配。就我而言，它的201P到247P和201M到247M。我要隐藏的文本框的ID为“hide + ID”或hide201P等。当隐藏另一个并且给定ID为nor201P等时，我正在显示div。当选中该复选框时，隐藏隐藏DIV并显示nor DIV。

感谢鲍勃让我走上正轨。

JQuery用于隐藏/显示相应DIV的许多复选框

2 个答案: