ansaurus

Question

Answer 1

+1 A:

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);
}

Mike Robinson 2009-12-14 23:11:41

Answer 2

+1 A:

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"&gt;
<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"&gt;&lt;/script&gt;
  <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>

jitter 2009-12-14 23:50:48

Thanks Mike and Jitter ! I appreciate looking at my code and coming up with a fix. The reason the code is a hodgepodge is:1. It's one part in a complex thing that I am trying to achieve.2. I am not lazy about it, but I just wanted to convey to people what I wanted to achieve functionality wise. I understand it's not the cleanest code.3. Dependencies -- I believe in extending the code functionality to do some more cool things.It's very hard to explain all this stuff which I want to achieve in a single comment box.. Anyways, Thanks for the suggestions and the replies.. :)

Vincent 2009-12-15 19:46:14

ansaurus

tags:

views:

answers:

JQuery Checkboxes Group check

related questions