Javascript復選框取消選中所有有效，但不選中全部

Question

我有這個JavaScript，用於“全部選中”和“全部取消選中”復選框。 它曾經可以正常工作，但是現在我添加了一些HTML格式，我似乎無法使其正常工作。 “全部取消選中”按鈕似乎可以正常工作，但是“全部選中”按鈕看起來像它會快速選中然后取消選中表單中的所有復選框。 我做錯了什么以及如何解決此問題，以便“全部選中”和“全部取消選中”按鈕都能正常工作？

這是我的代碼：

<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>

Answer 1

它似乎工作正常。 您提到的問題可能是因為您將check和uncheck字段的輸入類型設置為Submit而不是button。

  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>

Answer 2

您的按鈕設置為提交表單，因此將重新加載頁面（按按鈕時，請參閱URL上的/#后綴。
最簡單的解決方案是更改<input type="submit">您可以將輸入更改為type="button" 。 這樣，按下按鈕即可運行功能，而無需提交表單。 另一種選擇是向preventDefault()監聽器添加一個preventDefault()方法，例如：

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

這也將阻止提交表單。

Answer 3

更改輸入類型 =“提交”，因此輸入類型 =“按鈕”

Javascript復選框取消選中所有有效，但不選中全部

問題描述

3 個解決方案

解決方案1
3 已采納 2016-08-09 15:27:14

解決方案2
0 2016-08-09 15:31:34

解決方案3
0 2016-08-09 15:47:44

Javascript復選框取消選中所有有效，但不選中全部

問題描述

3 個解決方案

解決方案1 3 已采納 2016-08-09 15:27:14

解決方案2 0 2016-08-09 15:31:34

解決方案3 0 2016-08-09 15:47:44

解決方案1
3 已采納 2016-08-09 15:27:14

解決方案2
0 2016-08-09 15:31:34

解決方案3
0 2016-08-09 15:47:44