Javascript JQuery复选框组检查_Javascript_Jquery_Jquery Ui

Javascript JQuery复选框组检查

javascript jquery jquery-ui

Javascript JQuery复选框组检查,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,全部, 我有以下代码。如何修复它，使每个类别的“类别”复选框仅在选中该类别下的所有项目时才选中谢谢 <html> <head> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.3.2"); google.load("jqueryui", "1.7.2"); </script> <scrip

全部,

我有以下代码。如何修复它，使每个类别的“类别”复选框仅在选中该类别下的所有项目时才选中

谢谢

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


load（“jquery”，“1.3.2”）；
google.load（“jqueryui”，“1.7.2”）；
函数toggleTableRows（）
{
$（文档）.ready（函数（）{
$（'img.parent'）
.css（“光标”、“指针”）
.切换(
函数（）{
$（this.attr（“标题”，“单击以折叠”）
$（this.attr（“src”，“arrow_expanded.gif”）；
$（'tr'）.sides（'#child-'+this.id）.toggle（）；
},
函数（）{
$（this.attr（“标题”，“单击展开”）；
$（this.attr（“src”，“arrow_collapsed.gif”）；
$（'tr'）.sides（'#child-'+this.id）.toggle（）；
}
);
初始化复选框（）；
});
}
功能切换复选框（当前、窗体、字段）{
$（文档）.ready（函数（）{
$（“#”+form+”：复选框[name^=“+field+”[“]”）attr（“checked”，current.checked）；
});
}
函数切换父复选框（当前，形式）{
var checked=（$（“#“+form+”：复选框[name=”“+current.name+”））。长度==$（“#“+form+”：复选框[name=”+current.name+“]：checked”）。长度）；
//将“[anything]”替换为“”，而不仅仅是“[]”
$（“#”+form+”：复选框[name=”+current.name.replace（/\[^\]*\]/，“）+“]”）.attr（“选中”，选中）；
}
函数初始化复选框（表单）{
$（“#”+form+”：复选框：选中”）。每个（函数（）{
if（this.name.match（/chk[0-9]\[.*\]/）{
切换父复选框（此，窗体）；
}
});
}
切换表行（）；
类别-水果
苹果
香蕉
橙色
类别-蔬菜
卷心菜
西红柿
青椒

所以我将尝试回答这个问题（嘿，这是一个挑战！）

首先让我指出为什么人们不喜欢你的问题：

重复id:id=child-1与其他id一样多次出现。ID应该是唯一的，否则您将遇到选择器问题（getElementById确实不喜欢它）

内联javascript：很难通过查看代码来确定何时会发生什么操作。您应该在单独的脚本文件中隔离所有功能。这将使将来的维护变得更加容易，并允许浏览器缓存功能

nbsp。。。。考虑使用“填充左：15px”。为我们做吧

P.>所有人都说，考虑使用一个更有针对性的选择器。在本例中，请注意name^=

function toggleParentCheckboxes(current, form) {        
 var name = current.name.replace(/\[[^\]]*\]/, "");
 var selector = ":checkbox[name^='" + name + "[']";
 var checked = ($(selector).length == $(selector + ":checked").length);

    $("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}

尝试一下+一些你真的应该应用的注释

有些事情我已经解决了，可以处理这个事情

标题中缺少标题属性（已添加）
两个img标记都具有无效的纯数字id（更改为有效id）
id为child-0的多个tr（使id唯一，但仍基于img id）
id为child-1的多个tr（使id唯一，但仍基于img id）
缺少两个img标记上的alt属性（已添加）
太多内联javascript onclick处理程序（删除/替换为jQuery绑定和jQuery以查找正确的参数）
某些tr上的内联css太多（已删除/替换为css类）
脚本标记上缺少类型属性（已添加）
InitCheckBox是在没有参数的情况下调用的，因此不能用作选择器（将param添加到toggleTableRows）
使一些jQueryFoo更加灵活和健壮

修复了HTML+javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html;charset=ascii">
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.2");
  </script>
  <script type="text/javascript" language="JavaScript">
    function toggleTableRows(form) {
      $(document).ready(function() {
        $('img.parent')
          .css("cursor","pointer")
          .toggle(function() {
            var x = $(this);
            x.attr("title","Click to Collapse")
              .attr("src","arrow_expanded.gif");
            x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
          }, function() {
            var x = $(this);
            x.attr("title","Click to Expand")
              .attr("src","arrow_collapsed.gif");
            x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
          });
        initCheckBoxes(form);
      });
    }
    function toggleCheckboxes(current, form, field) {
      $(document).ready(function() {
        $("#"+ form +" input:checkbox[name^='"+ field +"[']").attr("checked", current.checked);
      });
    }
    function toggleParentCheckboxes(current, form) {
      var name = current.name.replace(/\[[^\]]*\]/, "");
      var selected = $("input:checkbox[name^='" + name + "[']");
      var checked = (selected.size() == selected.filter(":checked").size());
      $("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
    }
    function initCheckBoxes(form) {
      $("#"+ form +" input:checkbox:checked").each(function() {
        if (this.name.match(/chk[0-9]\[.*\]/)) {
          toggleParentCheckboxes(this, form);
        }
      });
    }
  </script>
  <script type="text/javascript" language="JavaScript">toggleTableRows("frmDinnerMenu");</script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("tr:not([id]) input").click(function() {
        var ele = $(this);
        toggleCheckboxes(this, ele.parents("form").eq(0).attr("name"), ele.attr("name"));
        ele=null;
      });
      $("tr[id] input").click(function() {
        toggleParentCheckboxes(this, $(this).parents("form").eq(0).attr("name"))
      });
    });
  </script>
  <style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
  <form name="frmDinnerMenu" id="frmDinnerMenu" method="post" action="">
    <table border="1">
      <tr>
        <td><img class="parent" id="i0" src="arrow_collapsed.gif" alt="fruits" title="Click to Expand" name="0">Category - Fruits</td>
        <td><input type="checkbox" name="chk0"></td>
      </tr>
      <tr class="c1" id="child-i00">
        <td>Apple</td>
        <td><input type="checkbox" value="0" name="chk0[1]"></td>
      </tr>
      <tr class="c1" id="child-i01">
        <td>Banana</td>
        <td><input type="checkbox" checked value="0" name="chk0[2]"></td>
      </tr>
      <tr class="c1" id="child-i02">
        <td>Orange</td>
        <td><input type="checkbox" checked value="0" name="chk0[5]"></td>
      </tr>
      <tr>
        <td><img class="parent" id="i1" src="arrow_collapsed.gif" alt="vegetable" title="Click to Expand" name="1">Category - Vegetables</td>
        <td><input type="checkbox" name="chk1"></td>
      </tr>
      <tr class="c1" id="child-i10">
        <td>Cabbage</td>
        <td><input type="checkbox" checked value="0" name="chk1[21]"></td>
      </tr>
      <tr class="c1" id="child-i11">
        <td>Tomatoes</td>
        <td><input type="checkbox" value="0" name="chk1[26]"></td>
      </tr>
      <tr class="c1" id="child-i12">
        <td>Green Peppers</td>
        <td><input type="checkbox" checked value="0" name="chk1[29]"></td>
      </tr>
    </table>
  </form>
</body>
</html>


测试
load（“jquery”，“1.3.2”）；
google.load（“jqueryui”，“1.7.2”）；
函数toggleTableRows（表单）{
$（文档）.ready（函数（）{
$（'img.parent'）
.css（“光标”、“指针”）
.toggle（函数（）{
var x=$（此）；
x、 属性（“标题”，“单击以折叠”）
.attr（“src”、“arrow_expanded.gif”）；
x、 父母（“tr”）.eq（0）.兄弟姐妹（“[id^=child-”+x.attr（“id”）+“]）”）.toggle（）；
}，函数（）{
var x=$（此）；
x、 属性（“标题”，“单击展开”）
.attr（“src”、“arrow_collapsed.gif”）；
x、 父母（“tr”）.eq（0）.兄弟姐妹（“[id^=child-”+x.attr（“id”）+“]）”）.toggle（）；
});
初始复选框（表格）；
});
}
功能切换复选框（当前、窗体、字段）{
$（文档）.ready（函数（）{
$（“#”+form+”输入：复选框[name^='“+field+“[']”）attr（“选中”，当前.checked）；
});
}
函数切换父复选框（当前、窗体）{
var name=current.name.replace（/\[^\]]*\]/，“”）；
所选变量=$（“输入：复选框[name^='”+name+“[']”）；
var checked=（selected.size（）==selected.filter（“：checked”）.size（））；
$（“#”+form+”：复选框[name=”“+name+””]）.attr（“checked”，checked）；
}
函数初始化复选框（表单）{
$（“#”+form+“输入：复选框：选中”）。每个（函数（）{
if（this.name.match（/chk[0-9]\[.*\]/）{
切换父复选框（此，窗体）；
}
});
}
切换表行（“frmdinermenu”）；
$（文档）.ready（函数（）{
$（“tr:not（[id]）input”）。单击（function（）{
var ele=$（本）；
切换复选框（此，ele.parents（“表单”）.eq（0）.attr（“名称”），ele.attr（“名称”）；
ele=null；
});
$（“tr[id]输入”）。单击（函数（）{
切换父项复选框（this，$（this）.parents（“表单”）.eq（0）.attr（“名称”））
});
});
tr.c1{显示：无；}
类别-水果
苹果
香蕉
橙色
类别-蔬菜
卷心菜
西红柿
格力