CODEWITHSUNDEEP
javascript
Strax Tillbaka
Strax Tillbaka

Reputation: 83

JavaScript function to determine if any checkboxes are checked

I have a table of checkboxes where I want to verify if at least one of those is checked. I wrote a little function to iterate over all checkboxes with a specific name and to check for the checked property, but my code never catches the scenario where no checkboxes are checked.

Table definition

<div id="testTable">
    <table class="table table-striped">
        <caption></caption>
        <thead>
            <tr>
                <th>Test</th>
                <th>Description</th>
            </tr>
        </thead>
        <tr>
            <td>
                <input type="checkbox" id="testA" name="test" title="Run TestA" />
                <label for="testA">TestA</label>
            </td>
            <td>Description of TestA</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="testB" name="test" title="Run TestB" />
                <label for="testB">TestB</label>
            </td>
            <td>Description of TestB</td>
        </tr>
    </table>
</div>

Test button

<div class="row">
    <div class="form-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btnRunTests">Run selected test(s)</button>
        </span>
    </div>
</div>

Script

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnRunTests').click(function ()
        {
            if (!anyTestsChecked)
            {
                $('#divAlertMain').html('<div id="divAlert" class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">x</button>You must select at least one test to run.</div>');
            }
            else
            {
                $('#divAlertMain').html('<div id="divAlert" class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">x</button>Good job!</div>');
            }
            window.setTimeout(function () {
                $('#divAlert').hide('slow');
            }, 10000);
        });
    });

    function anyTestsChecked()
    {
        var chk = document.getElementsByName('test');
        var len = chk.length;

        var foundChecked = false;
        var i = 0;
        while (i < len && !foundChecked)
        {
            if (chk[i].type === 'checkbox' && chk[i].checked)
            {
                foundChecked = true;
            }
            i++;
        }

        return foundChecked;
    }
</script>

Upvotes: 0

Views: 165

Answers (2)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

You can achieve same thing by using below code. (No need to write extra function for this)

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnRunTests').click(function () {
            if ($("input[name='test']").prop('checked') == false) {
                $('#divAlertMain').html('<div id="divAlert" class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">x</button>You must select at least one test to run.</div>');
            }
            else {
                $('#divAlertMain').html('<div id="divAlert" class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">x</button>Good job!</div>');
            }
            window.setTimeout(function () {
                $('#divAlert').hide('slow');
            }, 10000);
        });
    });
</script>

Upvotes: 1

forgivenson
forgivenson

Reputation: 4435

Your function anyTestsChecked is never run. You are just checking if it exists. Add () to the end of your function call in the if statement.

if (!anyTestsChecked())

Upvotes: 1

Related Questions