JQuery - 組複選框

我有下面的代碼，當點擊箭頭圖像時展開和摺疊子類別。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>&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值包含選中複選框的鍵而不是順序值。

我該怎麼做？

來源

2009-12-11 Jake

你可以嘗試改變的名稱您的輸入：

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

這將導致在PHP中的「蘋果」和「橘子」

當然，如果你ç鍵入一個數組焊割複選框的名字，看起來爲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"); 
     } 
    }); 
}

您coud也改變了檢查元素的「價值」

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

這將導致在相同的數組中，你會得到更多有用的值。

來源

2009-12-11 19:23:07 gnarf

我試着改變checbox的名稱，使用chk0 [0]，chk0 [1]，chk0 [2]等索引。可能這是我想要的，但是複選框的切換失敗。試試上面的代碼，並檢查我的意思..謝謝 - 文森特 – Jake 2009-12-11 19:31:41

@Vincent - 你的javascript是專門尋找chk0 []作爲一個名字，你可以改變它來尋找名字'chk0''' - 加上有還有其他一些要改變的地方...看看我在javascript部分的評論 – gnarf 2009-12-11 19:36:26

這似乎是正確的，除了只有在檢查所有子類別時才應檢查父複選框。 – Jake 2009-12-11 19:52:18

更改名稱使用索引，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');"/> 
...

來源

2009-12-11 19:21:55 Cesar

我試着改變checbox的名字來使用索引。可能這是我想要的，但是複選框的切換失敗。試試上面的代碼，並檢查我的意思.. 謝謝 – Jake 2009-12-11 19:29:01

JQuery - 組複選框

回答

相關問題