JQuery Checkboxes Group检查

时间：2009-12-14 19:22:09

标签： javascript jquery jquery-ui

所有

我有以下代码。如何修复它，以便只检查每个类别下的所有项目时才检查每个类别的类别复选框？

由于

<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
 function toggleTableRows()
 {
     $(document).ready(function() {
        $('img.parent')
           .css("cursor","pointer")
           .toggle(
              function() {
                 $(this).attr("title","Click to Collapse")
                 $(this).attr("src","arrow_expanded.gif");
                 $('tr').siblings('#child-'+this.id).toggle();
              },
              function() {
                 $(this).attr("title","Click to Expand");
                 $(this).attr("src","arrow_collapsed.gif");
                 $('tr').siblings('#child-'+this.id).toggle();
              }
          );

          initCheckBoxes();
  });
}

function toggleCheckboxes(current, form, field) {
     $(document).ready(function() {
        $("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
     });
}

function toggleParentCheckboxes(current, form) {        
        var checked = ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length);
        // replace '[anything]' with '' instead of just '[]'
        $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", checked);

}

function initCheckBoxes(form) {
    $("#"+ form +" :checkbox:checked").each(function() {
                  if (this.name.match(/chk[0-9]\[.*\]/)) {
            toggleParentCheckboxes(this, form);
        }
    });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr style="display: none;" id="child-0">
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple</td>
    <td><input type="checkbox" value="0" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Banana</td>
    <td><input type="checkbox" checked value="0" name="chk0[2]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orange</td>
    <td><input type="checkbox" checked value="0" name="chk0[5]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>

<tr><td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td><td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td></tr>
<tr style="display: none;" id=child-1><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cabbage</td><td><input type="checkbox" checked value="0" name="chk1[21]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tomatoes</td><td><input type="checkbox" value="0" name="chk1[26]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Green Peppers</td><td><input type="checkbox" checked value="0" name="chk1[29]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
</table>
</form>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

所以我会尝试回答这个问题（嘿，这是一个挑战！）。

首先让我指出为什么人们不喜欢你的问题：

  1. 重复ID：id = child-1和其他人一样多次出现。 ID应该是唯一的，否则你会遇到选择器问题（getElementById真的不喜欢它）
  2. 内联javascript：很难通过查看代码来确定何时发生的操作。您应该在单独的脚本文件中隔离所有功能。这将使维护在未来变得更加容易，并允许浏览器缓存功能。
  3. ＆amp; nbsp＆amp; nbsp＆amp; nbsp＆amp; nbsp ....考虑使用“padding-left：15px”。为我们做。

    4. 尽管如此，请考虑使用更有针对性的选择器。在此示例中，请注意 name ^ = 

    function toggleParentCheckboxes(current, form) {        
 var name = current.name.replace(/\[[^\]]*\]/, "");
 var selector = ":checkbox[name^='" + name + "[']";
 var checked = ($(selector).length == $(selector + ":checked").length);

    $("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}

答案 1 :(得分：1)

尝试了一些你真正应该应用的笔记

我修复了一些能够处理这件事的事情

  • 缺少头部的标题属性（已添加）
  • 两个img-tag都具有无效的仅限数字ID（已更改为生成有效ID）
  • 具有id child-0的多个tr（使id成为唯一但仍基于img id）
  • 带有id child-1的多个tr（使id成为唯一但仍基于img id）
  • 两个img标签上的alt属性缺失（已添加）
  • 太多的内联javascript onclick处理程序（删除/替换为jQuery绑定和jQuery以查找正确的参数）
  • 某些tr上的内联css太多（删除/替换为css类）
  • 脚本标记上缺少类型属性（已添加）

  • initcheckboxes在没有参数的情况下被调用，因此不能用作选择器（向toggleTableRows添加了param）

  • 使一些jQuery foo更加灵活和健壮

修正了HTML + javascript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html;charset=ascii">
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.2");
  </script>
  <script type="text/javascript" language="JavaScript">
    function toggleTableRows(form) {
      $(document).ready(function() {
        $('img.parent')
          .css("cursor","pointer")
          .toggle(function() {
            var x = $(this);
            x.attr("title","Click to Collapse")
              .attr("src","arrow_expanded.gif");
            x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
          }, function() {
            var x = $(this);
            x.attr("title","Click to Expand")
              .attr("src","arrow_collapsed.gif");
            x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
          });
        initCheckBoxes(form);
      });
    }
    function toggleCheckboxes(current, form, field) {
      $(document).ready(function() {
        $("#"+ form +" input:checkbox[name^='"+ field +"[']").attr("checked", current.checked);
      });
    }
    function toggleParentCheckboxes(current, form) {
      var name = current.name.replace(/\[[^\]]*\]/, "");
      var selected = $("input:checkbox[name^='" + name + "[']");
      var checked = (selected.size() == selected.filter(":checked").size());
      $("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
    }
    function initCheckBoxes(form) {
      $("#"+ form +" input:checkbox:checked").each(function() {
        if (this.name.match(/chk[0-9]\[.*\]/)) {
          toggleParentCheckboxes(this, form);
        }
      });
    }
  </script>
  <script type="text/javascript" language="JavaScript">toggleTableRows("frmDinnerMenu");</script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("tr:not([id]) input").click(function() {
        var ele = $(this);
        toggleCheckboxes(this, ele.parents("form").eq(0).attr("name"), ele.attr("name"));
        ele=null;
      });
      $("tr[id] input").click(function() {
        toggleParentCheckboxes(this, $(this).parents("form").eq(0).attr("name"))
      });
    });
  </script>
  <style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
  <form name="frmDinnerMenu" id="frmDinnerMenu" method="post" action="">
    <table border="1">
      <tr>
        <td><img class="parent" id="i0" src="arrow_collapsed.gif" alt="fruits" title="Click to Expand" name="0">Category - Fruits</td>
        <td><input type="checkbox" name="chk0"></td>
      </tr>
      <tr class="c1" id="child-i00">
        <td>Apple</td>
        <td><input type="checkbox" value="0" name="chk0[1]"></td>
      </tr>
      <tr class="c1" id="child-i01">
        <td>Banana</td>
        <td><input type="checkbox" checked value="0" name="chk0[2]"></td>
      </tr>
      <tr class="c1" id="child-i02">
        <td>Orange</td>
        <td><input type="checkbox" checked value="0" name="chk0[5]"></td>
      </tr>
      <tr>
        <td><img class="parent" id="i1" src="arrow_collapsed.gif" alt="vegetable" title="Click to Expand" name="1">Category - Vegetables</td>
        <td><input type="checkbox" name="chk1"></td>
      </tr>
      <tr class="c1" id="child-i10">
        <td>Cabbage</td>
        <td><input type="checkbox" checked value="0" name="chk1[21]"></td>
      </tr>
      <tr class="c1" id="child-i11">
        <td>Tomatoes</td>
        <td><input type="checkbox" value="0" name="chk1[26]"></td>
      </tr>
      <tr class="c1" id="child-i12">
        <td>Green Peppers</td>
        <td><input type="checkbox" checked value="0" name="chk1[29]"></td>
      </tr>
    </table>
  </form>
</body>
</html>
相关问题
最新问题