javascript - 检测 HTML 复选框是否被选中

Question

我创建了以下 jQuery 脚本来检查我的“chkboxAdd”复选框是否已被单击。

    (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);

但是单击“chkboxAdd”复选框后，警报提示总是出现在 else 子句上，而不是 if 子句上并提示:

            Checkbox add is NOT checked!

我已经包含了相关的 HTML 片段以供引用。预先感谢您。

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

Answer 1

$(this).attr('checked')

应该是

$(this).prop('checked')

因为您想要检查属性，而不是属性。获取该属性将确定该复选框是否具有 checked 的实际属性，该属性不会因常规用户输入而改变。

例如，如果页面在选中复选框的情况下开始，则 $(this).attr('checked') 将为 true，但如果用户取消选中该框，它仍然等于 true 。