我有以下代码，单击箭头图像时可以展开和折叠子类别。
<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> Apple</td>
<td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Banana</td>
<td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" 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 style="display: none;" id=child-1><td> 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> 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> 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> 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> 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> 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 值包含选中复选框的键而不是顺序值。
我该怎么做？
最佳答案
您可以尝试更改输入的名称:
<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" />
这将产生与您获得的相同的数组，但对于所检查的元素具有更有用的值。
关于php - JQuery - 组复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1890270/