登录验证，全选，反选
2019-09-29 本文已影响0人
36140820cbfd
1：登陆验证
image.png
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form action="" id="f1">
<p>
<label>用户名：
<input type="text" id="i1" name="username"/>
<span></span>
</label>
</p>
<p>
<label>密码:
<input type="passowrd" id="i2" name="password"/>
<span></span>
</label>
</p>
<button id="b1" type="button">提交</button>
</form>
<script src="jquery-3.4.1.min.js"></script>
<script>
$("#b1").click(function () {
var $inputEles = $("#f1 input");
for (var i=0;i<$inputEles.length;i++){
var tmp = $inputEles[i];
if ($(tmp).val().length === 0){
// 表示该input框的值为空
console.log($(tmp).parent().text().trim().slice(0,-1));
var s = $(tmp).parent().text().trim().slice(0,-1);
$(tmp).next().text(s + "不能为空").css("color", "red");
}
}
});
</script>
</body>
</html>
2 全选，取消，和反选
image.png
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>蝇蝇</td>
<td>用手</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>康抻</td>
<td>gay in gay out</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>黄袍哥</td>
<td>吹牛逼</td>
</tr>
</tbody>
</table>
<hr>
<button id="b1">全选</button>
<button id="b2">反选</button>
<button id="b3">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 全选
$("#b1").click(function () {
// 找到所有的checkbox,选中:prop("checked", true)
$(":checkbox").prop("checked", true);
});
// 取消
$("#b3").click(function () {
// 找到所有的checkbox,取消选中:prop("checked", false)
$(":checkbox").prop("checked", false);
});
// 反选
$("#b2").click(function () {
// var $check = $(":checkbox");
// for (var i=0;i<$check.length;i++){
// var tmp = $check[i];
// var s = $(tmp).prop("checked");
//
// // 如果s是true就改成false，如果是false就改成true
// // if (s){
// // $(tmp).prop("checked", false);
// // }else {
// // $(tmp).prop("checked", true);
// // }
//
// $(tmp).prop("checked", !s);
// }
// 找到所有选中的checkbox;
var $checked = $("input:checked");
// 找到没有选中的
var $unchecked = $("input:not(:checked)");
$checked.prop("checked", false);
$unchecked.prop("checked", true);
});
</script>
</body>
</html>
