本篇教程介绍了JavaScript基础教程之JavaScript对checkbox勾选判断，错误提示和按钮变色操作，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

同意相关条款未打钩时，登录按钮为灰色且无法提交，点击灰色的登录按钮提示同意相关条款，打钩后变成亮色且可以提交信息。
勾选框及文字：

1 <div class="check-rule">
2     <label>
3         <input type="checkbox" name="" id="check" class="hidden" onchange="boxChange(this)" >
4         <i class="check" ></i>
5     </label>
6         我同意相关条款 <span ><font  id="agreeRule" color="red" size="3"></font></span>
7 </div>

JS代码按钮变色实现:

function boxChange(obj){
        if($(obj).prop("checked")){
            //选中操作
            var newbtn=document.getElementById("regist").src="../resources/img/regist-btn.png";
                $("#regist").css("background",‘url(‘ + newbtn + ‘)‘);
            $("#agreeRule").hide();
        }else{
            //取消选中操作
            var newbtn=document.getElementById("regist").src="../resources/img/regist-btngray1.png";
                $("#regist").css("background",‘url(‘ + newbtn + ‘)‘);
            document.getElementById("agreeRule").innerHTML="请同意相关条款";
             $("#agreeRule").show();
        }
    }

JS代码判断checkbox是否选中操作：

function verify(){
        var isCheck=$("#check").get(0).checked;//获取选中状态，返回true或者false
         if(!isCheck){
            document.getElementById("agreeRule").innerHTML="请同意相关条款";
             return;
         }else{
//        相关操作。。。
    }
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！