jQuery .each 问题

发布于 2024-08-13 19:34:53 字数 1310 浏览 4 评论 0原文

脑筋急转弯,需要帮助,

我有一个有 6 行的表格,可以隐藏或可见,具体取决于是否选中复选框。这个 .each 例程非常适合解决一个小问题 - 当选中最后一个复选框 (val="5") 并单击刷新按钮时,第 6 行(带有 class="hide5")被隐藏。这只发生在最后一个复选框上 - 选中的任何其他复选框都保持可见。

$(document).ready(function($) {
    $('input:checkbox').each(
        function(rowIndex){
            if($('#view'+rowIndex).is(':checked') == true){
                $('.hide'+rowIndex).show();
            }
            else if($('#view'+rowIndex).is(':checked') == false){
                $('.hide'+rowIndex).hide();
            }
        }
    );
    $('input:checkbox').click(function () {                             
        var row = this.value;
        $('.hide' + row).toggle();
    });
}); 

第 6th 行的 HTML 源代码是:

<tr class="hide5">
  <td width="175" align="center" style="padding:1px 0px 11px 0px"><br />
    <span>Total</span><br />
    <span>&nbsp;</span><br />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
</tr> 

提前感谢您的帮助

Bob Knothe

Brain squeeze and need help,

I have a table with 6 rows that are that can be hidden or visible depending on if a check box is checked. This .each routine works great with one small problem - when the last check box (val="5") is checked and you hit the refresh button the row 6 (with class="hide5") is hidden. This only occurs on the last check box - any other checkbox that is checked stays visible.

$(document).ready(function($) {
    $('input:checkbox').each(
        function(rowIndex){
            if($('#view'+rowIndex).is(':checked') == true){
                $('.hide'+rowIndex).show();
            }
            else if($('#view'+rowIndex).is(':checked') == false){
                $('.hide'+rowIndex).hide();
            }
        }
    );
    $('input:checkbox').click(function () {                             
        var row = this.value;
        $('.hide' + row).toggle();
    });
}); 

The HTML source for the 6th row is:

<tr class="hide5">
  <td width="175" align="center" style="padding:1px 0px 11px 0px"><br />
    <span>Total</span><br />
    <span> </span><br />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
</tr> 

Thanks in advance for your help

Bob Knothe

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

沩ん囻菔务 2024-08-20 19:34:53

试试这个:

$(document).ready(function($) {
    $('input:checkbox').each(function(rowIndex){
        var $row = $(this);
        if ($row.is(':checked')){
            $('.hide'+rowIndex).show();
        } else {
            $('.hide'+rowIndex).hide();
        }
    });
    $('input:checkbox').click(function () {                             
        var row = this.value;
        $('.hide' + row).toggle();
    });
});

Try this out:

$(document).ready(function($) {
    $('input:checkbox').each(function(rowIndex){
        var $row = $(this);
        if ($row.is(':checked')){
            $('.hide'+rowIndex).show();
        } else {
            $('.hide'+rowIndex).hide();
        }
    });
    $('input:checkbox').click(function () {                             
        var row = this.value;
        $('.hide' + row).toggle();
    });
});
囍笑 2024-08-20 19:34:53

该复选框的 ID 为“View5”,但 JS 引用了 'view'+rowIndexID 区分大小写

The checkbox has id "View5", but the JS references 'view'+rowIndex. IDs are case sensitive.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文