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

似乎工作正常。您提到的问题可能是因为您有检查的输入类型并取消选中字段而不是按钮。

    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"。这样按下按钮就可以运行功能而无需提交表格。另一种选择是向eventListener添加preventDefault()方法，例如：

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

这也会阻止提交表单。

Answer 3

更改输入类型 =＆＃34;提交＆＃34;所以输入类型 =＆＃34;按钮＆＃34;

Javascript复选框取消选中所有工作，但检查全部不工作

3 个答案: