Javascript对checkbox勾选判断，错误提示和按钮变色操作

最新推荐文章于 2021-06-09 23:11:06 发布

原创最新推荐文章于 2021-06-09 23:11:06 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

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

勾选框及文字：

<div class="check-rule">
	<label>
		<input type="checkbox" name="" id="check" class="hidden" onchange="boxChange(this)" >
		<i class="check" ></i>
	</label>
		我同意相关条款 <span ><font  id="agreeRule" color="red" size="3"></font></span>
</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{
//		相关操作。。。
	}