Home/ Questions/Q 498409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T05:52:35+00:00

I have the following code. I need help fixing it such that the Category

  • 0

I have the following code. I need help fixing it such that the “Category” checkbox for each category should be checked only if all the items under that are checked.

<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>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>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>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>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>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>Green Peppers</td>
    <td><input type="checkbox" checked value="0" name="chk1[29]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
</table>
</form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    your html is still a mess but here is the solution

    <!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.toggle_subcheckbox').click(function(){
            $('.subcheckbox', $(this).parents('div')).toggle();
        });


        $('.subcheckbox input').change(function(){
            $this = $(this);
            var checker = true;
            $('input', $this.parents('.subcheckbox')).each(function(){
                if( ! $(this).is(':checked')){
                    checker = false
                }
                else {
                    $('.maincheckbox', $this.parents('div')).attr('checked', false);
                }
            });

            if(checker){
                $('.maincheckbox', $this.parents('div')).attr('checked', true);
            }
        });

        $('.maincheckbox').change(function(){
            var state = $(this).is(':checked');

            $('.subcheckbox input', $(this).parents('div')).each(function(){
                $(this).attr('checked', state);
            });
        });
    });
</script>
<style type="text/css" media="screen">
    .subcheckbox {
        display: none;
    }
</style>
</head>
<body>
    <form id="frmDinnerMenu" method="post" action="">
        <div>
            <label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Fruits</label>
            <input class="maincheckbox" type="checkbox" name="chk0" />
            <div class="subcheckbox">
                <div>
                    <label>Apple</label>
                    <input type="checkbox" value="0" name="chk0[1]" />
                </div>
                <div>
                    <label>Banana</label>
                    <input type="checkbox" value="0" name="chk0[2]" />
                </div>
                <div>
                    <label>Orange</label>
                    <input type="checkbox" value="0" name="chk0[5]" />
                </div>
            </div>
        </div>
        <div>
            <label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Vegetables</label>
            <input class="maincheckbox" type="checkbox" name="chk0" />
            <div class="subcheckbox">
                <div>
                    <label>Cabbage</label>
                    <input type="checkbox" value="0" name="chk1[21]" />
                </div>
                <div>
                    <label>Tomatoes</label>
                    <input type="checkbox" value="0" name="chk1[26]" />
                </div>
                <div>
                    <label>Green Peppers</label>
                    <input type="checkbox" value="0" name="chk1[29]" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>
    • 0