Javascript Kontrollkästchen Deaktivieren Sie alle funktioniert, aber Überprüfen Sie alle nicht

Ich habe dieses Javascript für "Check All" und "Alle Kontrollkästchen deaktivieren". Früher funktionierte es gut, aber jetzt, da ich einige HTML-Formatierungen hinzugefügt habe, scheint es nicht richtig zu funktionieren. Die Schaltfläche "Alle deaktivieren" scheint zu funktionieren, aber die Schaltfläche "Alle überprüfen" sieht so aus, als würde sie alle Kontrollkästchen in meinem Formular schnell aktivieren und deaktivieren. Was habe ich falsch gemacht und wie behebe ich das Problem, so dass sowohl die "Check All" als auch die "Uncheck All" Buttons richtig funktionieren?Javascript Kontrollkästchen Deaktivieren Sie alle funktioniert, aber Überprüfen Sie alle nicht

Hier ist mein Code:

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

Quelle

2016-08-09 Chris Nielsen

Knopfart Senden, verursacht Formular zu schreiben, so dass die Seite zu aktualisieren. Ändern Sie den Typ = "Schaltfläche". Nehmen Sie auch href = "javascript: void();" Es ist sinnlos und kann Probleme in einigen Browsern verursachen. – Caimen

Es scheint gut zu funktionieren. Das Problem, das Sie erwähnt haben, könnte sein, dass Sie den Eingabetyp des Kontrollkästchens aktiviert und die Felder als "Senden" anstelle von "Schaltfläche" deaktiviert haben.

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>

Quelle

2016-08-09 15:27:14 10100111001

Danke. Das war's. Ich habe 'type =" Submit "' zu 'type =" button "' geändert und es hat sofort funktioniert. –

Ihre Tasten eingestellt sind dem Formular einzureichen, damit die Seite neu geladen wird (siehe /# Suffix auf die URL, wenn Sie die Taste drücken.
Die einfachste Lösung ist <input type="submit"> sich ändern Sie können entweder die Eingaben in type="button" ändern, und auf diese Weise können Sie die Funktionen ausführen, ohne das Formular zu senden Eine weitere Option wäre das Hinzufügen einer preventDefault()-Methode zu einem eventListener, beispielsweise:

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

Dies verhindert auch, dass das Formular gesendet wird.

Quelle

2016-08-09 15:31:34

Ändern input type = "Submit" so input type = "button"

Quelle

2016-08-09 15:47:44 riyadi

Javascript Kontrollkästchen Deaktivieren Sie alle funktioniert, aber Überprüfen Sie alle nicht

Antwort

Verwandte Themen