tags:

views:

232

answers:

2
+1  Q: 

JQuery - Group Checkboxes

Hi,

I have the following code which expands and collapses a subcategory when the arrow image is clicked.

<html>
<head>

<script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;

<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) {
        $("#"+ 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);
        $("#"+ form +" :checkbox[name='"+ current.name.replace("[]", "") +"']").attr("checked", checked);
}

function initCheckBoxes() {
    $("#frmDinnerMenu :checkbox:checked").each(function() {
        if (this.name.replace(/[0-9]/g, "") == "chk[]") {
                toggleParentCheckboxes(this, "frmDinnerMenu");
        }
    });
}
</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="true" name="chk0[]" 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" value="false" name="chk0[]" 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="true" name="chk0[]" 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[]" 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" checked value="0" name="chk1[]" 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[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr><td><img class="parent" id="2" src="arrow_collapsed.gif" title="Click to Expand">Category - Dessert</td><td><input type="checkbox" name="chk2" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk2');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ice Cream</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Custard</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chocolate Cake</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
</table>
</form>
</body>
</html>

Note that when the form is posted, I get the following output

[chk0] => Array ( 
                  [0] => true 
                  [1] => true 
                ) 
.....
.......

How can I make sure I get the posted values like this:

[chk0] => Array ( 
                  [0] => true 
                  [2] => true 
                )

The idea is to modify the JavaScript functions and HTML code so the checkbox toggling works and also the POSTED values contain the keys of the checked checkboxes instead of sequential values.

How can I do this?

+2  A: 

Change the names to use a index, chk0[0], chk0[1], chk0[2], ...

Ex:

<input type="checkbox" value="true" name="chk0[0]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/>
<input type="checkbox" value="true" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/>
...
Cesar  2009-12-11 19:21:55
I tried changing the checbox name to use an index. Probably this is what I want, but the toggling of checkboxes fails. Try out the above code and check what I mean..Thanks
Vincent  2009-12-11 19:29:01
+3  A: 

You could try changing the names of your inputs:

<input type="checkbox" name="chk0[apple]" value="true" />
<input type="checkbox" name="chk0[orange]" value="true" />

This should result with an array in php keyed by "apple" and "orange"

Of course, if you change the checkbox names, the javascript that looks for the chk0[] as the name will need to change slightly:

function toggleCheckboxes(current, form, field) {
        // search for name begining with 'field[' to find children checkboxes
        $("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
}

function toggleParentCheckboxes(current, form) {
        var $form = $("#"+form);
        var category = current.name.replace(/\[[^\]]*\]/, "");

        // figure out if there are any unchecked checkboxes in the current category:
        if ($form.find(":checkbox[name^='"+category+"[']:not(:checked)").length)
        {
           $form.find(":checkbox[name="+category+"]").removeAttr('checked');
        } else {
           $form.find(":checkbox[name="+category+"]").attr('checked', checked);
        }
}

function initCheckBoxes() {
    $("#frmDinnerMenu :checkbox:checked").each(function() {
        // matches chk0[whatever]
        if (this.name.match(/chk[0-9]\[.*\]/)) {
                toggleParentCheckboxes(this, "frmDinnerMenu");
        }
    });
}

You coud also change the "value" of the checked element

<input type="checkbox" name="chk0[]" value="apple" />
<input type="checkbox" name="chk0[]" value="orange" />

This will result in the same array you are getting but with more useful values for the checked elements.

gnarf  2009-12-11 19:23:07
I tried changing the checbox name to use an index like chk0[0], chk0[1], chk0[2],. Probably this is what I want, but the toggling of checkboxes fails. Try out the above code and check what I mean.. Thanks – Vincent
Vincent  2009-12-11 19:31:41
@Vincent - Your javascript was specifically looking for chk0[] as a name, you can change that to look for names starting with 'chk0[' - plus there were a few other points to change there... look at my comments in the javascript section
gnarf  2009-12-11 19:36:26
This seems to work right, except that, the parent checkbox should be checked only if all the subcategories are checked.
Vincent  2009-12-11 19:52:18
@Vincent - rewrote `toggleParentCheckboxes` for that logic - sorry
gnarf  2009-12-11 20:12:30
@gnarf -> Thanks for looking into it, but it's still not working. Can you please check the toggleParentCheckboxes logic again?
Vincent  2009-12-11 20:24:44

related questions

IDE suggestions: Eclipse IDE vs. Zend Studio ( confused )
MySQL/Apache Error in PHP MySQL query
Lightweight IDE for Linux
What PHP framework would you choose for a new application and why?
Why is my ternary expression not working?
How can I get at the matches when using preg_replace in PHP?
Mechanisms for tracking DB schema changes
Wordpress theme development offline tools
Using object property as default for method property
How can I get the authenticated user name under Apache using plain HTTP authentication and PHP?
Make XAMPP/Apache serve file outside of htdocs
How do you debug PHP scripts?
PHP Variables passed by value or by reference?
Best way to implement unit testing in PHP
Connect PHP to an AS/400
Best way to access Exchange using PHP?
PHP Session Security
How do I access a remote form in php?
What's the best way to generate a tag cloud from an array? (using h1 through h6 for sizing)
Apache/PHP: error_log per Virtual Host?
How do I track file downloads with apache/PHP
How would you access Object properties from within an object method?
Flat File Databases in PHP
Best way to allow plugins for a PHP application
Latest information on PHP upcoming releases