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>
dongzhang3482
dongzhang3482 toolong
10 年多之前 回复
dtr32787
dtr32787 如果选中“Apple”,“Orange”,“Banana”旁边的复选框,则应选中“Category-Fruits”复选框,否则应取消选中。“类别-蔬菜”复选框的情况相同
10 年多之前 回复
dsajdgjadwqe3247382
dsajdgjadwqe3247382 不幸的是,你正在使用表格而且代码太宽,很难阅读。你能编辑格式(新行上的<td>)吗?请详细说明您正在尝试完成的内容。
10 年多之前 回复

3个回答

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>
duancong6937
duancong6937 谢谢 !! 这就是我想要完成的事情..我知道使用div标签是最好的方法,但我想用表格来做...
10 年多之前 回复
dqkv0603
dqkv0603 too long
10 年多之前 回复



在输入中添加一些东西,将它们区分为类的组成员或类似ala'class =“chbVegetables”'和 然后使用:checked selector </ p>

$(:checkbox [name ='chk1'])。checked = $('。chbVegetables:not(:checked)')。length == 0 </ code> </ p>
</ div>

展开原文

原文

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

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

doumor942473
doumor942473 too long
10 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐