多选按钮选中进行下一步

Posted 2020-09-13 暗杠小发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多选按钮选中进行下一步相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .center
            {   height: 10%;
                width:10% ;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div class="center">
           是否同意服务协议<br />
         <input type="checkbox" id="check"  onclick="a(this)"/>
         <label for="check">同意</label><br /><br />
         <input type="submit" value="提交" id="sub" disabled="disahled"/>
         </div>
    </body>
</html>
<script>
function a(obj){

    var sub1=document.getElementById("sub");

    if(obj.checked){

        sub1.disabled=false;

    }else{

//      alert(‘需要同意服务协议‘);

        sub1.disabled=true;

    }

}

</script>

以上实现的是选中多选按钮可进行下一步（自己的版本)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        
        <input type="checkbox" id="ckb" onclick="check()" />
        <input type="button" disabled="disabled" value="下一步" id="btn" />
        
    </body>

</html>
<script>
        
        function check() {
            var ckb = document.getElementById(‘ckb‘);
            if(ckb.checked) {
                document.getElementById(‘btn‘).removeAttribute(‘disabled‘);
            }
                         else {
                document.getElementById(‘btn‘).setAttribute(‘disabled‘,‘disabled‘);
            }
        }
</script>

以上为老师的版本，相较更为简单

以上是关于多选按钮选中进行下一步的主要内容，如果未能解决你的问题，请参考以下文章

vue checkbox多选框按钮添加全选按钮