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" 'に変更してすぐに動作しました。 –

あなたのボタンは、ボタンを押したときに、URLに/#サフィックスを参照してください（したがって、ページがリロードされ、あなたのフォームを送信するように設定されている。
最も簡単な解決策を変更することである<input type="submit"> preventDefault()メソッドをeventListenerに追加することもできます。

このようにすると、入力を type="button"に変更することができます。

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

これにより、フォームの送信が妨げられます。

出典

2016-08-09 15:31:34

入力タイプを変更 = ので、入力タイプ =「ボタン」

出典

2016-08-09 15:47:44 riyadi

Javascriptチェックボックスすべてのチェックを外しますが、すべてチェックしません

答えて

関連する問題