Javascript複選框取消選中所有作品，但是全選不選

我對「全選」和「取消全選」複選框都有此javascript。它曾經工作得很好，但現在我已經添加了一些HTML格式，我似乎無法讓它正常工作。「全部取消」按鈕似乎可以工作，但「全部檢查」按鈕看起來像是快速檢查，然後取消選中表單中的所有複選框。我做了什麼錯誤，我該如何解決這個問題，以便「全部檢查」和「全部取消」按鈕正常工作？Javascript複選框取消選中所有作品，但是全選不選

這裏是我的代碼：

<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<style> 

</style> 
</head><body bgcolor="#99ccff"> 


    <script type="text/javascript" language="javascript"> 
    function checkAll(formname, checktoggle) 
    { 
     var checkboxes = new Array(); 
     checkboxes = document.forms[formname].getElementsByTagName('input'); 

     for (var i=0; i<checkboxes.length; i++) { 
     if (checkboxes[i].type == 'checkbox') { 
      checkboxes[i].checked = checktoggle; 
     } 
     } 
    } 
    </script> 

    <form name="list_form" action="#" method='POST'> 
    <input type="hidden" name="selected_region" value="APAC"> 
    <input type="hidden" name="selected_qtr" value="Q1"> 
    <input type="hidden" name="selected_year" value="2013"> 


    <table width="300" cellpadding="0" cellspacing="25" valign="top" border="0"> 

    <TR valign="top"> 
     <td> 
      <table width="400" class="border0"> 
      <TR valign="bottom"> 
       <td id="tfont4"><b>Check Test</b><BR><hr><BR></td> 
      </tr> 
      </table> 
     </td> 
    </TR> 

    <tr> 
    <td> 
    <table width="400" cellpadding="0" cellspacing="0" valign="top" border="0"> 
     <tr> 
      <td> 
      <input class="button" type="Submit" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();"> 
      </td> 
      <td align="right"> 
      <input class="button" type="Submit" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();"> 
      </td> 
     </tr> 
    </table> 
    </td> 
    </tr> 

    <table border="0" cellpadding="10" width="400"> 
     <tr> 
     <td valign="top"> 
      <input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia"> 
         <label for="Indonesia"><span><span></span></span>Indonesia</label><BR> 
      <input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia"> 
         <label for="Malaysia"><span><span></span></span>Malaysia</label><BR> 
      <input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore"> 
         <label for="Singapore"><span><span></span></span>Singapore</label><BR> 
      <input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand"> 
         <label for="Thailand"><span><span></span></span>Thailand</label><BR> 
     </td> 
     <td valign="top"> 
     </td> 
     <td valign="top"> 
     </td> 
    </tr> 
    </table> 
    <BR> 
    &nbsp;&nbsp;&nbsp;<input class="button" type="Submit" value="Generate Reports"> 
    </form> 
    </center>

來源

2016-08-09 Chris Nielsen

按鈕類型提交，導致您的形式發佈，從而導致頁面刷新。更改類型=「按鈕」。還取出href =「javascript：void（）;」這是毫無意義的，可能會在某些瀏覽器中導致問題。 – Caimen

這似乎是工作的罰款。你提到的問題可能是因爲你有輸入類型的檢查和取消選中字段作爲提交而不是按鈕。

function checkAll(formname, checktoggle) { 
 
     var checkboxes = new Array(); 
 
     checkboxes = document.forms[formname].getElementsByTagName('input'); 
 

 
     for (var i = 0; i < checkboxes.length; i++) { 
 
     if (checkboxes[i].type == 'checkbox') { 
 
      checkboxes[i].checked = checktoggle; 
 
     } 
 
     } 
 
    }

<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 

 
    <style> 
 
    </style> 
 
</head> 
 

 
<body bgcolor="#99ccff"> 
 

 

 
    <form name="list_form" action="#" method='POST'> 
 
    <input type="hidden" name="selected_region" value="APAC"> 
 
    <input type="hidden" name="selected_qtr" value="Q1"> 
 
    <input type="hidden" name="selected_year" value="2013"> 
 

 

 
    <table width="300" cellpadding="0" cellspacing="25" valign="top" border="0"> 
 

 
     <TR valign="top"> 
 
     <td> 
 
      <table width="400" class="border0"> 
 
      <TR valign="bottom"> 
 
       <td id="tfont4"><b>Check Test</b> 
 
       <BR> 
 
       <hr> 
 
       <BR> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </TR> 
 

 
     <tr> 
 
     <td> 
 
      <table width="400" cellpadding="0" cellspacing="0" valign="top" border="0"> 
 
      <tr> 
 
       <td> 
 
       <input type="button" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();"> 
 
       </td> 
 
       <td align="right"> 
 
       <input type="button" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();"> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
     <table border="0" cellpadding="10" width="400"> 
 
     <tr> 
 
      <td valign="top"> 
 
      <input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia"> 
 
      <label for="Indonesia"><span><span></span></span>Indonesia</label> 
 
      <BR> 
 
      <input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia"> 
 
      <label for="Malaysia"><span><span></span></span>Malaysia</label> 
 
      <BR> 
 
      <input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore"> 
 
      <label for="Singapore"><span><span></span></span>Singapore</label> 
 
      <BR> 
 
      <input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand"> 
 
      <label for="Thailand"><span><span></span></span>Thailand</label> 
 
      <BR> 
 
      </td> 
 
      <td valign="top"> 
 
      </td> 
 
      <td valign="top"> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <BR>&nbsp;&nbsp;&nbsp; 
 
     <input class="button" type="Submit" value="Generate Reports"> 
 
    </form> 
 
    </center>

來源

2016-08-09 15:27:14 10100111001

謝謝。就是這樣。我將'type =「Submit」'改成了'type =「button」'，它馬上就可以工作。 –

你的按鈕被設置爲提交表單，因此重新加載頁面（見/#後綴的網址，當你按下按鈕。
最簡單的解決辦法是改變<input type="submit">您可以將輸入更改爲type="button"。這樣按下按鈕即可在不提交表單的情況下運行功能另一種方法是將preventDefault()方法添加到eventListener，例如：

document.getElementById(....).addEventListener("click", function(event) 
{ 
    event.preventDefault(); 
    ..... 
});

這也會阻止提交表單。

來源

2016-08-09 15:31:34

改變輸入型 =「提交」，以便輸入型 =「按鈕」

來源

2016-08-09 15:47:44 riyadi

Javascript複選框取消選中所有作品，但是全選不選

回答

相關問題