dousa2794
2009-12-14 20:29 阅读 45

Jquery UI复选框 - 仅在选中所有子类别时检查类别

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    duanbixia7738 duanbixia7738 2009-12-14 21:00

    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>
    
    点赞 评论 复制链接分享
  • dougang7521 dougang7521 2009-12-14 20:42

    Add something to your inputs to distinguish them as a member of a group like a class or something ala 'class="chbVegetables"' and then use the :checked selector

    $(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0

    点赞 评论 复制链接分享
  • duancong2160 duancong2160 2009-12-14 20:49

    Inside function toggleParentCheckboxes, try:

    if ($("#"+ 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", true);
    }
    

    However, as czarchiac said, it's a little unclear what you're trying to accomplish

    点赞 评论 复制链接分享

相关推荐