zoukankan      html  css  js  c++  java
  • Javascript对checkbox勾选判断,错误提示和按钮变色操作

    同意相关条款未打钩时,登录按钮为灰色且无法提交,点击灰色的登录按钮提示同意相关条款,打钩后变成亮色且可以提交信息。

    勾选框及文字:

    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{
    //        相关操作。。。
        }


    
    
  • 相关阅读:
    winform_webApiSelfHost
    手机访问网站自动跳转到手机版
    Linux常用命令
    css居中
    固定菜单
    BOM操作写法实例
    表格(合并单元格)
    倒计时
    分享到插件
    jquery获得下拉框的值
  • 原文地址:https://www.cnblogs.com/zzmb/p/7727211.html
Copyright © 2011-2022 走看看