CODEWITHSUNDEEP
phpjavascriptjquery
Jake
Jake

Reputation: 26117

JQuery - Group Checkboxes

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"></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) {
        $("#"+ 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?

Upvotes: 2

Views: 910

Answers (2)

gnarf
gnarf

Reputation: 106332

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.

Upvotes: 3

Cesar
Cesar

Reputation: 3519

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');"/>
...

Upvotes: 2

Related Questions