javascript - 选中所有复选框并启用按钮

标签 javascript jquery button checkbox

我在选中所有复选框时遇到问题,一旦选中,按钮就应该被禁用。我是 JavaScript 的新手,我真的很难理解如何解决这个问题。任何知道如何解决这个问题的人都会对我的项目有很大帮助。

顺便说一句,这是我的代码:

                <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title></title>
                <style type="text/css">
                    body
                    {
                        font-family: Arial;
                        font-size: 10pt;
                    }
                </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('.chk1').change(function () {
                            if ($(this).is(":checked")) {
                                $('#btnClick').removeAttr('disabled');
                            }
                            else {
                                var isChecked = false;
                                $('.chk1').each(function () {
                                    if ($(this).is(":checked")) {
                                        $('#btnClick').removeAttr('disabled');
                                        isChecked = true;
                                    }
                                });
                                if (!isChecked) {
                                    $('#btnClick').attr('disabled', 'disabled');
                                }
                            }


                        })
                    });
                </script>
                <script type="text/javascript">
                    function checkALL(){
                        var chk_arr =  document.getElementsByName("draw[]");        
                        for(k=0;k< chk_arr.length;k++)
                        {
                            chk_arr[k].checked = true;
                        } 
                    CheckIfChecked();
                    }

                    function unCheckALL(){
                        var chk_arr =  document.getElementsByName("draw[]");             
                        for(k=0;k< chk_arr.length;k++)
                        {
                            chk_arr[k].checked = false;
                        } 
                        CheckIfChecked();
                    }
                </script>
            </head>
            <body>
                <table border="0" cellpadding="0" cellspacing="0">
                    <a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a>
                    <tr>
                        <td>
                            <input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
                            One
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Two
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Three
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Four
                        </td>
                    </tr>
                    <button id="btnClick" disabled="disabled">
                        Click me !!!</button>
                </table>
            </body>
            </html>

在我的代码中,当我选中一个或多个复选框时,按钮会启用,而当没有选中复选框时,按钮会被禁用。 现在我的问题是,当我点击All 链接时,它应该选中所有复选框并启用按钮,当我点击None 时,它应该取消选中复选框并禁用按钮.

最佳答案

要选中所有复选框和取消选中复选框,请使用 JQuery。为所有复选框赋予相同的类,例如“chk1”,然后调用

$( ".chk1" ).prop ('checked', true);

然后您可以迭代类的所有元素并检查它们是否都被选中

$( ".chk1" ).each(function() {
    if ($(this).is(':checked'))
      // do something 
})

关于javascript - 选中所有复选框并启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32552262/

相关文章:

javascript - 有什么方法可以访问 chrome for android 中的磁力计输入?

android - 当切换按钮在android中更改状态时如何删除效果

Android 转换程序在单击按钮时崩溃

javascript - 如何让表单中的input+label一一出现?

javascript - 选择一个元素 | Javascript 与 Jquery

javascript - 如何将 JS 对象转换为数组

jquery - 设置数据表插件的记录总数

javascript - jQuery 附加和前置 div 和点击事件

javascript - 在模块中导入 jQuery 插件

SwiftUI:如何让按钮在 safari 中打开 URL?