dousa2794 2009-12-14 20:29
浏览 46
已采纳

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 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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿