Fatal编程技术网
  • javascript/
  • JavaScript+；css-更改主类别'；s复选框css，如果选中其下的任何项目

JavaScript+；css-更改主类别'；s复选框css，如果选中其下的任何项目

javascript jquery css

JavaScript+；css-更改主类别'；s复选框css，如果选中其下的任何项目,javascript,jquery,css,Javascript,Jquery,Css,全部, 我有一个附加的代码段，其中一个类别复选框被选中，如果它下面的所有项目都被选中。如何修改代码，以便： 如果选中了任何类别下的任何复选框，则其父“类别”复选框的CSS样式应显示为灰色。（我不想禁用复选框。只需通过CSS查看灰色或任何颜色）。这将表示如果类别已折叠，则会检查某些项目 如果在类别下选中了所有项目，则复选框不必显示为灰色，因为它也将被选中 所有现有的代码功能都应该维护，因为它工作得很好 PS：很抱歉HTML太乱了 有什么建议吗？ 谢谢 load（“jquery”，“1.3.2”）

全部,

我有一个附加的代码段，其中一个类别复选框被选中，如果它下面的所有项目都被选中。如何修改代码，以便：

  • 如果选中了任何类别下的任何复选框，则其父“类别”复选框的CSS样式应显示为灰色。（我不想禁用复选框。只需通过CSS查看灰色或任何颜色）。这将表示如果类别已折叠，则会检查某些项目

  • 如果在类别下选中了所有项目，则复选框不必显示为灰色，因为它也将被选中

    • 所有现有的代码功能都应该维护，因为它工作得很好

    PS：很抱歉HTML太乱了

    有什么建议吗？ 谢谢

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

    包括一个与此类似的CSS类（如果需要，可以添加更多样式）

    将
    toggleparentcheckbox
    更改为此（包括一些“优化”。重构了常见选择器部分，并通过使用过滤器删除了“双重”选择）

    如果将
    toggleTableRows
    中对
    initCheckBoxes的调用更改为
    initCheckBoxes（“frmdinermenu”）你将在页面加载时得到高亮显示，而不仅仅是当第一个孩子被改变时。
    我也使用了与jitter提到的相同的方法。它工作得很好，我认为它是唯一可用的选项，因为浏览器上没有三态复选框
    

    <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 Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.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>
  <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="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 class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" 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 class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

    

    .graymeout { background-color:#D8D8D8 }

    

    function toggleParentCheckboxes(current, form) {
    var selector1 = "#"+ form +" :checkbox[name='";
    var selector2 = selector1 + current.name +"']";
    var set = $(selector2);
    var checked = set.length == set.filter(":checked").length;
    // replace '[anything]' with '' instead of just '[]'
    var ele = $(selector1 + current.name.replace(/\[[^\]]*\]/, "") +"']");
    ele.attr("checked", checked);
    if(!checked)
        ele.addClass("graymeout")
    else
        ele.removeClass("graymeout");
    ele=null; set=null; selector1=null; selector2=null;
}