jquery toggle only execute the first condition

Question

This must be fairly simple for many of you. I wrote a function to select all checkboxes if user clicks on anchor tag (). However, on the first click the function select all checkboex but nothing happens when I click on the anchor tag again (it should deselect all the checkboxes again). Here is my JS function

function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {

    var mainTableId = $.data(mainTable, 'BetTableData').tableId;
    var tr = $('<tr/>')
        .addClass(trClassName)
        .appendTo(table)
        .append($('<td colspan="' + colspanNumber + '"/>'))
        .append($('<td />')
            .append($('<a id="fieldSelectAll"/>')
                .html(field)
                .click(function() {
                    var els = document.getElementsByName(mainTableId + "_select" + i);
                    for (var j = 0; j < els.length; j++) {
                        if ($("#fieldSelectAll").toggle()) {
                            els[j].checked = true;
                        }
                    }
                })) )
}  

Edit 1:

So if I remove the anchor tag and replacing with a select all check box it works if I modify my function as follow:

function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {

    var mainTableId = $.data(mainTable, 'BetTableData').tableId;

    // Create row with checkbox
    var tr = $('<tr/>')
        .addClass(trClassName)
        .appendTo(table)
        .append($('<td colspan="' + colspanNumber + '"/>'))
        // Create checkbox
        .append($('<td/>')
            .html(field)
            .append($('<input type="checkbox" id="' + mainTableId + '_select' + i + '"/>'))
                .click(function () {
                    var els = document.getElementsByName(mainTableId + "_select" + i);
                    for (var j = 0; j < els.length; j++) {
                        if ($("#" + mainTableId + "_select" + i).is(':checked')) {
                            els[j].checked = true;
                        } else els[j].checked = false;
                    }
                }))
}

However, instead of using a 'checkall' checkbox, I simply need to toggle the checkall thing on anchor tag click. If that makes senses?

Answer 1

Use a variable to keep track of the state:

function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {

    var mainTableId = $.data(mainTable, 'BetTableData').tableId;
    var allChecked = false;
    var tr = $('<tr/>')
        .addClass(trClassName)
        .appendTo(table)
        .append($('<td colspan="' + colspanNumber + '"/>'))
        .append($('<td />')
            .append($('<a id="fieldSelectAll"/>')
                .html(field)
                .click(function() {
                    var els = document.getElementsByName(mainTableId + "_select" + i);
                    allChecked = !allChecked;
                    for (var j = 0; j < els.length; j++) {
                        els[j].checked = allChecked;
                    }
                })) )
}