JQuery Checkboxes Group check_问答_开发者_运维开发者技术经验分享

All,

I have the following code. How can I fix it so that the category checkbox for each category is checked only if all the items under that are checked?

Thanks

<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>

gave it a try + some notes which you really should apply too

Some things I fixed to be able to work with this thing

missing title attribute in head (added)
Both img-tags have invalid numeric-only id (changed to make a valid id)
Multiple tr's with id child-0 (made ids unique but still based on img id)
Multiple tr's with id child-1 (made ids unique but still based on img id)
alt attribute on both img-tags missing (added)
too-many inline javascript onclick handlers (removed/ replaced with jQuery bindings and jQuery to find right parameters)
too-many inline css on some tr's (removed/replaced with css class)
missing type attribute on the script tags (added)
initcheckboxes is called without parameter, thus won't work as selector (added param to toggleTableRows)
made some of the jQuery foo more flexible and robust

Fixed 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>

So I'm going to try and answer this question (hey, it's a challenge!).

First let me point out why people don't like your question though:

Duplicate ids: id=child-1 appears multiple times, as do others. Ids should be unique, otherwise you'll run into selector problems (getElementById really doesn't like it)
Inline javascript: It's hard to determine from looking at the code what actions happen when. You should isolate all functionality in a separate script file. This will make maintenance significantly easier in the future, and allow the browser to cache functionality.
&nbsp&nbsp&nbsp&nbsp .... consider using "padding-left: 15px". Do it for us.

That all being said, consider using a more targeted selector. In this example, notice 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);
}