JQuery - 组复选框答案

【问题标题】：JQuery - Group CheckboxesJQuery - 组复选框
【发布时间】：2009-12-11 19:16:19
【问题描述】：

我有以下代码在单击箭头图像时展开和折叠子类别。

<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) {
        $("#"+ 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);
        $("#"+ form +" :checkbox[name='"+ current.name.replace("[]", "") +"']").attr("checked", checked);
}

function initCheckBoxes() {
    $("#frmDinnerMenu :checkbox:checked").each(function() {
        if (this.name.replace(/[0-9]/g, "") == "chk[]") {
                toggleParentCheckboxes(this, "frmDinnerMenu");
        }
    });
}
</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="true" name="chk0[]" 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" value="false" name="chk0[]" 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="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 style="display: none;" id=child-1><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cabbage</td><td><input type="checkbox" checked value="0" name="chk1[]" 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" checked value="0" name="chk1[]" 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[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr><td><img class="parent" id="2" src="arrow_collapsed.gif" title="Click to Expand">Category - Dessert</td><td><input type="checkbox" name="chk2" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk2');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ice Cream</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Custard</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-2><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chocolate Cake</td><td><input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
</table>
</form>
</body>
</html>

请注意，当表单发布时，我得到以下输出

[chk0] => Array ( 
                  [0] => true 
                  [1] => true 
                ) 
.....
.......

我怎样才能确保我得到这样的发布值：

[chk0] => Array ( 
                  [0] => true 
                  [2] => true 
                )

这个想法是修改 JavaScript 函数和 HTML 代码，以便复选框切换起作用，并且 POSTED 值包含选中复选框的键而不是顺序值。

我该怎么做？

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

您可以尝试更改输入的名称：

<input type="checkbox" name="chk0[apple]" value="true" />
<input type="checkbox" name="chk0[orange]" value="true" />

这应该会导致 php 中的数组以“apple”和“orange”为键

当然，如果您更改复选框名称，查找 chk0[] 作为名称的 javascript 将需要稍微更改：

function toggleCheckboxes(current, form, field) {
        // search for name begining with 'field[' to find children checkboxes
        $("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
}

function toggleParentCheckboxes(current, form) {
        var $form = $("#"+form);
        var category = current.name.replace(/\[[^\]]*\]/, "");

        // figure out if there are any unchecked checkboxes in the current category:
        if ($form.find(":checkbox[name^='"+category+"[']:not(:checked)").length)
        {
           $form.find(":checkbox[name="+category+"]").removeAttr('checked');
        } else {
           $form.find(":checkbox[name="+category+"]").attr('checked', checked);
        }
}

function initCheckBoxes() {
    $("#frmDinnerMenu :checkbox:checked").each(function() {
        // matches chk0[whatever]
        if (this.name.match(/chk[0-9]\[.*\]/)) {
                toggleParentCheckboxes(this, "frmDinnerMenu");
        }
    });
}

你也可以改变被检查元素的“值”

<input type="checkbox" name="chk0[]" value="apple" />
<input type="checkbox" name="chk0[]" value="orange" />

这将导致您获得相同的数组，但为选中的元素提供更有用的值。

【讨论】：

我尝试更改复选框名称以使用 chk0[0]、chk0[1]、chk0[2] 之类的索引。可能这就是我想要的，但复选框的切换失败。试试上面的代码，看看我的意思。谢谢——文森特
@Vincent - 您的 javascript 专门寻找 chk0[] 作为名称，您可以将其更改为查找以 'chk0[' 开头的名称 - 另外还有其他一些需要更改的地方。 .. 在 javascript 部分查看我的 cmets
这似乎工作正常，除了，只有当所有子类别都被选中时，父复选框才应该被选中。
@Vincent - 重写了 toggleParentCheckboxes 的逻辑 - 抱歉
@gnarf -> 感谢您研究它，但它仍然无法正常工作。你能再检查一下toggleParentCheckboxes逻辑吗？

【解决方案2】：

更改名称以使用索引，chk0[0]、chk0[1]、chk0[2]、...

例如：

<input type="checkbox" value="true" name="chk0[0]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/>
<input type="checkbox" value="true" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/>
...

【讨论】：

我尝试更改复选框名称以使用索引。可能这就是我想要的，但复选框的切换失败。试试上面的代码，看看我的意思..谢谢