代码来源于此微博

https://blog.csdn.net/weixin_38007235/article/details/79594055#commentsedit
版权声明：本文为CSDN博主「暗_涌」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_38007235/article/details/79594055

我已经获得人家的许可了。我只是加上我的一点理解。为了以后用上方面看。

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta charset="utf-8" /><title></title><style>*{padding: 0px;margin: 0px;}body{background-color: #efefef;}.dvlogin{width: 600px;height: 480px;position: absolute;top: 50%;left: 50%;/*外边距 （上，右，下，左）*/margin: -240px 0px 0px -300px;/* box-shadow表示阴影   四个参数分别表示  水平偏移的距离，垂直偏移的距离，阴影的半径，阴影的颜色*/box-shadow: 0px 0px 20px rgb(30, 93, 151);background-color: white;}/* 登录头部样式*/.dvHeader{height: 30px;line-height: 30px;border-bottom: 1px solid #cdcdcd;padding: 10px;font-weight: bold;}/*登录身体的样式*/.dvBody{width: 400px;padding: 70px 50px 0px 50px; margin: 0px auto;}.section{height: 55px;}.section label{/*行级元素变为块级元素*/display: block;width: 100px;float: left;text-align: right;margin-right: 10px;font-size: 13px;line-height: 25px;}.section span{font-size: 14px;}.section input[type='text']{width: 200px;height: 25px;line-height: 25px;border: 1px solid #CDCDCD;}/*登录按钮的样式*/.btnReg{width: 150px;height: 30px;line-height: 30px;background-color: rgb(30, 93, 151);border: none;color: white;margin-left: 120px;cursor: pointer;transition:all 5s;  }/*鼠标移动上去的样式*/.btnReg:hover{background-color: green;}</style></head><body><div class="dvlogin"><!--作者：offline时间：2016-02-27描述：页面的头部--><div  class="dvHeader"> <!-- head -->南京信息工程大学</div><div class="dvBody"><!-- body--><div class="section"><label>用户名</label><input type="text"  id="userName" placeholder="请输入用户名"/></div><div class="section"><label>密码</label><input type="text"  id="password" placeholder="请输入密码"  /></div><div class="section"><label>性别</label><span>男</span><input type="radio" class ="sex" name="sex" /><span>女</span><input type="radio" class="sex" name="sex" /><!--单选按钮：必须得加上相同的name属性，不然能同时选中这个按钮--></div><div class="section"><label>爱好</label><span>王者荣耀</span><input type="checkbox"  name="hobby" class="hobby" /><span>看NBA</span><input   type="checkbox" name="hobby" class="hobby" /></div><div class="section"><input type="button" value="注册" class="btnReg" /></div></div></div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script><script>$(function(){$(".btnReg").click(function(){//获取用户名的值var username= $("#userName").val();if(username==""){alert('用户名不能为空');return ;}var password= $("#password").val();if(password==""){alert('密码不能为空');return ;}var istrue=false;var  sex=$(".sex");for(var i=0;i<sex.length;i++){if(sex.eq(0).prop("checked")){alert('你选中的是男');}   if(sex.eq(1).prop("checked")){                            alert('你选中的是女');} /* 我还没有用过这些语法，我只就这个例子进行学习：class=sex不是有两个input type=radio嘛按钮不论按了啥，var  sex=$(".sex")调试的结果：sex = r.fn.init(2) [input.sex, input.sex, prevObject: r.fn.init(1)]*/if(sex.eq(i).prop("checked")){                        istrue=true;break;}    }if(!istrue){alert('必须选择性别');return;  }if($(".hobby:checked").length==0){alert('必须选择爱好');return;}alert('验证成功');})});</script></body>
</html>

checkbox部分（我当时是想了解这里的）

获取checked的数量如果为0 则都没选：

  if($(".hobby:checked").length==0){alert('必须选择爱好');return;}

如果没有class 可以就用name去做 $(“input[name=hobby]:checked”).length

checkbox不全部选中，会跳出提示（这个是我记录的重点）相关推荐

html 为checkbox添加check函数,html 里 checkbox里只要选中就会自动添加checked=“checked”么？...
事实上HTML代码是不会发生变化的,但是控件对象的属性会发生变化以反映这个操作的结果.也就是说,该对象的checked属性值会由false变成true.但元素标签中并不会插入checked=" ...
java中判断复选框是否选中_php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考一下 ...
html 判断checkbox,javascript判断checkbox是否被选中
1. 当表单里面只有一个checkbox复选框时,这时候很容易判断checkbox复选框是否被选中,如下实例: if(document.getElementById("ck1"). ...
判断复选框checkbox是否被选中，及全选实现
判断checkbox是否被选中在用vue实现购物车的选中功能时,总价变为只计算选中商品的总价,出现无法判断复选框是否选中的问题. 最后发现应该用document.getElementById去获取i ...
js判断checkbox是否被选中
js判断checkbox是否被选中 HTML代码如下: <input type=checkbox name='nID' value='1'> <input type=checkbox ...
jquery特效（6）—判断复选框是否选中进行答题提示
前面有一段时间思想开了小差,跟着师父学习了一段时间才发现差距很大,看来我要奋起直追~\(≧▽≦)/~啦啦啦. 最近公司在做一个项目,需要根据用户选择的选项给出相应的提示,下面来看我写的测试程序的效果: ...
用js 判断datagrid 中的 checkbox 是否被选中
private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 ...
Jquery常用操作：checkbox、select取值，radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素使用jquery真的很方便,比如要控制div的显示与隐 ...
DataTables中设置checkbox回显选中
场景在进行编辑时DataTables中第一列的checkbox回显默认选中. 效果实现 dataTables赋值代码 columns: [{ data: 'id' ,"orderable ...
判断checkbox是否被选中，判定选中的个数！
一般,我们对前台的checkbox进行处理. 要考虑一是,单个checkbox的处理这个就比较简单了, 例如 <input type="checkbox" id=" ...

checkbox不全部选中，会跳出提示（这个是我记录的重点）

代码来源于此微博

checkbox部分（我当时是想了解这里的）

checkbox不全部选中，会跳出提示（这个是我记录的重点）相关推荐

最新文章

热门文章