2
화살표 이미지를 클릭했을 때 하위 카테고리를 펼치거나 접을 수있는 다음 코드가 있습니다.JQuery - 그룹 체크 박스
<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
)
에게 체크 박스 토글이 작동하도록 POST 및 POSTED 값에 순차 값 대신 체크 된 체크 박스의 키가 포함되도록 JavaScript 함수 및 HTML 코드를 수정합니다.
어떻게하면됩니까?
chk0 [0], chk0 [1], chk0 [2]와 같은 색인을 사용하기 위해 checbox 이름을 변경하려고했습니다. 아마도 이것은 내가 원하는 것이지만 체크 박스를 토글하는 것은 실패합니다. 위의 코드를 시험해보고 무슨 뜻인지 확인해주세요. 감사합니다 - Vincent – Jake
@Vincent - 자바 스크립트가 특별히 chk0 []을 (를) 찾고 이름을 'chk0 ['- ' 거기에 변경하려면 몇 가지 다른 점은 ... 자바 스크립트 섹션에서 내 의견을 봐 – gnarf
이것은 모든 하위 범주가 선택되어있는 경우에만 부모 확인란을 선택해야한다는 것을 제외하고는 제대로 작동하는 것 같습니다. – Jake