aktivieren/deaktivieren Sie alle Kontrollkästchen beim klicken einer checkbox per javascript

Gibt es ein paar Probleme mit dem code. Das wichtigste ist, dass du ein ein single - überprüft variable zu verfolgen, die der Staat für beide Formen. Das kann nicht funktionieren. Verwenden Sie stattdessen den status des "checkall" Kontrollkästchen für die anderen Checkboxen.

Vermuten lässt, die Sie wirklich haben zwei Formen, wenn Sie nicht verwenden Sie zwei Formen siehe unten):

<form action="" method="post" name="frm1" id="frm1">
    <table>    
        <tr><th>Cause List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

<form action="" method="post" name="frm2" id="frm2">
    <table>    
        <tr><th>Subscription List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

Hinweis, ich habe die inline-event-handler zu checkedAll.call(this).

Dann Ihre Funktion sollte wie folgt Aussehen:

function checkedAll() {
    //this refers to the clicked checkbox
    //find all checkboxes inside the checkbox' form
    var elements = this.form.getElementsByTagName('input');
    //iterate and change status
    for (var i = elements.length; i--; ) {
        if (elements[i].type == 'checkbox') {
            elements[i].checked = this.checked;
        }
    }
}

DEMO

Natürlich gibt es Möglichkeiten, den code zu verbessern. Zum Beispiel werden Sie wahrscheinlich wollen, fügen Sie die Logik zum deaktivieren des jeweiligen "select all" - checkbox, wenn alle, wenn die anderen Checkboxen in der Tabelle deaktiviert ist.

Ich auch empfehlen zu Lesen, der große Einführung in die Ereignisbehandlung quirksmode.org, zu erfahren, wie der Bindung von event-Handlern.

Wenn Sie nicht verwenden können, zwei Formen, die Sie haben zu finden einem anderen Vorfahren als Referenz-Punkt (d.h., aus denen Sie wählen Sie alle Checkboxen). In diesem Fall, die table element scheint vorzuziehen. Sie müssen durch das Dokument, bis du es findest.
Die inline click-Ereignishandler muss noch geändert werden, um checkedAll.call(this) für diese Arbeit:

function checkedAll() {
    //this refers to the clicked checkbox

    //find closest table
    var parent = this.parentNode;
    do {
        parent = parent.parentNode;
    } while(parent.nodeName !== 'TABLE');

    //find all checkboxes inside the checkbox' table
    var elements = parent.getElementsByTagName('input');

    //... continue like shown above
}

InformationsquelleAutor Felix Kling

Versuchen, diese

function checkedAll(frm1) {
  var chk = document.getElementsByTagName('input');
  for(var i=0; i < chk.length; i++) {
    if(chk[i].type == 'checkbox') {
      chk[i].checked = frm1.checked;
    }
  }
}

oder finden Sie weitere details hier.

InformationsquelleAutor nrsharma

versuchen, diese DEMO

var checked=false;
function checkedAll () {
var aa =  document.getElementsByName("causelist_month");
checked = document.getElementById('causelist_month').checked;

for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}

function checkedAll2() {
var aa =  document.getElementsByName("subscription_month");
checked = document.getElementById('subscription_month').checked;


for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}

InformationsquelleAutor Pragnesh Chauhan