全選複選框

Question

我有一個網頁，以表格/表格的形式返回搜索結果。我想要一個全選複選框，這將選中搜索結果的所有複選框。我對顯示結果代碼如下：

<script type="text/javascript" 
<!-- 
function SetAllCheckBoxes(FormName, FieldName, CheckValue) 
{ 
    if(!document.forms[FormName]) 
     return; 
    var objCheckBoxes = document.forms[FormName].elements[FieldName]; 
    if(!objCheckBoxes) 
     return; 
    var countCheckBoxes = objCheckBoxes.length; 
    if(!countCheckBoxes) 
     objCheckBoxes.checked = CheckValue; 
    else 
     // set the check value for all check boxes 
     for(var i = 0; i < countCheckBoxes; i++) 
      objCheckBoxes[i].checked = CheckValue; 
} 
// --> 
</script> 

而且像這樣的按鈕：

<form action="noJavaScript.php" name="theForm" method="post"> 
<table style="border: 1px solid black" RULES=ALL FRAME=VSIDES> 
<th> </th><th>Order #</th><th>Inspector</th><th>Reference #</th><th>Client Name</th><th>Property Address</th><th>City</th><th>State</th><th>Zip</th><th>Inspection Date</th> 
     <?php 
      while ($row = mysql_fetch_assoc($result)) 
      { 
       echo '<tr><td>'; 
       echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'"/>'; 
       echo '</td>'; 
       foreach ($row as $key => $value) 
        echo '<td>'.htmlspecialchars($value).'</td>'; 
       echo '</tr>'; 
      } 
     ?> 

    </table> 
<input type="submit" name="submit" value="Edit/Modify Order" onClick="document.theForm.action='modify.php'"> 
<input type="submit" name="submit" value="Clone Order" onClick="document.theForm.action='clone.php'"> 
<input type="submit" name="submit" value="Delete Order" onClick="document.theForm.action='deleteorder.php'"> 
<input type="submit" name="submit" value="Archive Order" onClick="document.theForm.action='archive.php'"> 

</form> 

我已經使用下面的函數試圖

 <input type="button" onclick="SetAllCheckBoxes('theForm', 'myCheckbox', true);" value="Check All">; 

但我不能讓它工作。

Answer 1

爲每個複選框輸入添加一個類。

echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'" class="yourclass" />';

然後在javascript疊代中的Docment所有輸入字段，並檢查他們是否有既type="checkbox"和class="yourclass"。並將它們全部設置爲CHECKED！

Answer 2

您可以使用jQuery爲此在簡單的方式

$("form input:checkbox").attr('checked','true'); 

Answer 3

var form = document.getElementsById('form_id'); 
var checkBoxes = form.getElementsByTagName('input'); 
for (var i in checkBoxes) 
{ 
    if (checkBoxes[i].type=="checkbox") 
     checkBoxes[i].checked = true; 
} 

Answer 4

最好的解決方案4 u是一個jQuery腳本

/*Unik Checkbox to mark/desmark other checkboxes*/ 
<input type="checkbox" onclick="selectAllCheckBoxes(this)" id="checkBoxUnik"/> 

/*Several other Checkboxes inside loop*/ 
<input type="checkbox" onclick="unselectCheckBoxUnik()" class="checkBoxInLoop" /> 

<script> 
    function selectAllCheckBoxes(obj){ 
     $('input:checkbox:not(:disabled).checkBoxInLoop').prop('checked', jQuery(obj).prop('checked')); 
    } 

    function unselectCheckBoxUnik(){ 

     /*first you verify if the quantity of checkboxes equals number of checkboxes*/ 
     a = $('input:checkbox:not(:disabled).checkBoxInLoop:checked').size(); 
     b = $('input:checkbox:not(:disabled).checkBoxInLoop').size(); 

     /*if equals, mark a checkBoxUnik*/ 
     ((a == b)? $('#checkBoxUnik').prop("checked", true) : $('#checkBoxUnik').prop("checked", false)); 
    } 
</script>