Javascript 选中所有复选框并启用按钮_Javascript_Jquery_Button_Checkbox

Javascript 选中所有复选框并启用按钮

javascript jquery button checkbox

Javascript 选中所有复选框并启用按钮,javascript,jquery,button,checkbox,Javascript,Jquery,Button,Checkbox,我在检查所有复选框时遇到问题，一旦选中，按钮应该被禁用。我是JavaScript新手，很难理解如何解决这个问题。任何知道如何解决这个问题的人都会对我的项目大有帮助顺便说一下，这是我的代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <

我在检查所有复选框时遇到问题，一旦选中，按钮应该被禁用。我是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>


身体
{
字体系列：Arial；
字号：10pt；
}
$（函数（）{
$（'.chk1'）.change（函数（）{
如果（$（this）.is（“：checked”））{
$（'btnClick'）.removeAttr（'disabled'）；
}
否则{
var isChecked=false；
$（'.chk1'）。每个（函数（）{
如果（$（this）.is（“：checked”））{
$（'btnClick'）.removeAttr（'disabled'）；
isChecked=true；
}
});
如果（！已检查）{
$（'btnClick'）.attr（'disabled'，'disabled'）；
}
}
})
});
函数checkALL（）{
var chk_arr=document.getElementsByName（“draw[]）；
对于（k=0；k


在我的代码中，当我选中一个或多个复选框时，按钮被启用，当没有选中复选框时，按钮被禁用。
现在我的问题是，当我单击All链接时，它应该选中所有复选框并启用按钮；当我单击None时，它应该取消选中复选框并禁用按钮。
要选中所有复选框并取消选中复选框，请使用JQuery。将所有复选框设为同一类，例如“chk1”，然后调用
$( ".chk1" ).prop ('checked', true);

然后可以迭代类的所有元素并检查它们是否都已检查
$( ".chk1" ).each(function() {
    if ($(this).is(':checked'))
      // do something 
})

要选中所有复选框并取消选中复选框，请使用JQuery。将所有复选框设为同一类，例如“chk1”，然后调用
$( ".chk1" ).prop ('checked', true);

然后可以迭代类的所有元素并检查它们是否都已检查
$( ".chk1" ).each(function() {
    if ($(this).is(':checked'))
      // do something 
})

实现所述目标的最短代码如下：
$(function() {
    $('#show').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', true);
        $('#btnClick').prop('disabled', false);
    });
    $('#hide').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', false);
        $('#btnClick').prop('disabled', true);
    });
});

在下面的演示中，您会注意到您的标记已被清理以处理以下事项：

删除内联JavaScript，这是一个需要维护的噩梦
删除重复的ID；ID应该是唯一的
删除重复的元素属性


$（函数（）{
$（'#show'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'.chk1'）.prop（'checked'，true）；
$（'btnClick'）.prop（'disabled'，false）；
});
$（'#hide'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.chk1'）.prop（'checked'，false）；
$（'btnClick'）.prop（'disabled'，true）；
});
});

| 
一个
两个
三
四
点击我！！！
实现所述目标的最短代码如下：
$(function() {
    $('#show').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', true);
        $('#btnClick').prop('disabled', false);
    });
    $('#hide').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', false);
        $('#btnClick').prop('disabled', true);
    });
});

在下面的演示中，您会注意到您的标记已被清理以处理以下事项：

删除内联JavaScript，这是一个需要维护的噩梦
删除重复的ID；ID应该是唯一的
删除重复的元素属性


$（函数（）{
$（'#show'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'.chk1'）.prop（'checked'，true）；
$（'btnClick'）.prop（'disabled'，false）；
});
$（'#hide'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.chk1'）.prop（'checked'，false）；
$（'btnClick'）.prop（'disabled'，true）；
});
});

| 
一个