CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
vishnu
vishnu

Reputation: 738

Detecting if an HTML checkbox was selected

I have created the following jQuery script to check if my "chkboxAdd" checkbox has been clicked or not.

    (function ( $ ){
        $.fn.myfunction = function(){
            $("input[type='checkbox']").click(function() 
            {      
                if($(this).attr('name') == 'chkboxAdd' && $(this).attr('checked') == true   )
                {

                    alert('Checkbox add is checked!');
                } 
                else 
                {
                    alert('Checkbox add is NOT checked!');
                 }
            });
        };   
    })(jQuery);

However after clicking the "chkboxAdd" checkbox, the alert prompt always go on the else clause instead of the if clause and prompts:

            Checkbox add is NOT checked!

I have included the relevant HTML snippets for reference. Thank you in advance.

<script>
     $(document).ready(function() 
     {
         $('#chkBoxTable').myfunction();
     } ); 
</script>

                    <table id="chkBoxTable" cellpadding="10" cellspacing="1">
                        <thead>
                                <tr>
                                    <th><strong>Page ID</strong></th>
                                    <th><strong>Page Name</strong></th>
                                    <th><strong>Action</strong></th>
                                </tr>
                        </thead>
                    <?php
                        <tbody>
                                <tr>
                                    <td><?php echo $row["PAGEID"]; ?></td>
                                    <td><?php echo $row["PAGENAME"]; ?></td>
                                    <td><input type="checkbox" name="chkboxAdd" value="add">Add</td>
                                </tr>
                        </tbody>
                    </table>

Upvotes: 1

Views: 80

Answers (1)

Brian Leishman
Brian Leishman

Reputation: 8575

$(this).attr('checked')

Should be

$(this).prop('checked')

since you want the property checked, not the attribute. Getting the attribute would determine whether or not the check box has the actual attribute of checked, which would not change from regular user input.

Example, if the page started with the check box checked then $(this).attr('checked') would be true, but if the user unchecked the box, it would still equal true.

Upvotes: 1

Related Questions