<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
需求;当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
验证的规则是:必须由字母，数字，下划线组成。并且长度是5到12位。
**/
function onclickfun(){
//1.要操作一个标签，先获取它的对象
var usernameobj = document.getElementById("username");
//2.获取它的value
var value = usernameobj.value;
//3.设置正则表达式匹配模式
var regStr = /^\w{5,12}$/;
//4.进行匹配
//test方法用于测试某个字符串是否符合匹配规则
//匹配返回true，不匹配返回false
//操作span标签
//innerHTML代表起始标签和结束标签中的内容
//innerHTML属性可读可写
var spanobj = document.getElementById("span");
if (regStr.test(value)){
spanobj.innerHTML="<img src=\"right.png\" width=\"18px\" height=\"18px\">";
}else {
spanobj.innerHTML="<img src=\"wrong.png\" width=\"18px\" height=\"18px\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" value="xxx" id="username">
<button onclick="onclickfun()">确认</button>
<span style="color: red" id="span"></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkall(){
//让所有复选框都选中
//document.getElementsByName();是根据指定的name属性查询返回多个标签对象合集
//这个集合的操作跟数组一样
//集合中都是dom对象
var hobbyobj = document.getElementsByName("hobby");
//checked表示复选框的选中状态。如果选中是true，不选中是false
//check属性可读可写,有序
for (var i = 0; i < hobbyobj.length; i++) {
hobbyobj[i].checked=true;
}
}
//全不选
function checknone(){
var hobbyobj = document.getElementsByName("hobby");
//checked表示复选框的选中状态。如果选中是true，不选中是false
//check属性可读可写
for (var i = 0; i < hobbyobj.length; i++) {
hobbyobj[i].checked=false;
}
}
//反选
function checkreverse(){
var hobbyobj = document.getElementsByName("hobby");
for (var i = 0; i < hobbyobj.length; i++) {
hobbyobj[i].checked=!hobbyobj[i].checked;
// if (hobbyobj[i].checked){
// hobbyobj[i].checked=false;
// }else {
// hobbyobj[i].checked=true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="cpp">c++
<input type="checkbox" name="hobby" value="jsp">javascript
<br/>
<button onclick="checkall()">全选</button>
<button onclick="checknone()">全不选</button>
<button onclick="checkreverse()">反选</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkall(){
//让所有复选框都选中
//document.getElementsByTagName("input");是根据指定的name属性查询返回多个标签对象合集
//这个集合的操作跟数组一样
//集合中都是dom对象
var inputobj = document.getElementsByTagName("input");
for (var i = 0; i < inputobj.length; i++) {
inputobj[i].checked=true;
}
}
</script>
</head>
<body>
兴趣爱好：<input type="checkbox" value="java">java
<input type="checkbox" value="cpp">c++
<input type="checkbox" value="jsp">javascript
<br/>
<button onclick="checkall()">全选</button>
</body>
</html>