密码显示/隐藏切换
代码:
<body>
<input type="password" name="" id="pwd"> <input type="button" value="eye" onclick="fn()">
<script>
function fn() {
// 声明变量,获取密码框
var pwd = document.getElementById("pwd");
// 判断
if (pwd.type == "password") {
pwd.type = "text"
} else {
pwd.type = "password"
}
}
</script>
</body>
效果图:
全选/全不选/反选
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<p><input type="checkbox" name="" id="checkAll">全选/全不选 | <input type="checkbox" id="fanxuan">反选</p>
<hr>
<ul>
<li><input type="checkbox">香蕉</li>
<li><input type="checkbox">苹果</li>
<li><input type="checkbox">葡萄</li>
<li><input type="checkbox">芒果</li>
<li><input type="checkbox">桃</li>
<li><input type="checkbox">梨</li>
</ul>
<script>
// 声明一个全选框的变量,并获取全选框
var checkAll = document.querySelector("#checkAll");
// 声明一个所有水果选项的变量,并获取ul里每一个水果选项的复选框
var inputAll = document.querySelectorAll("li input");
// 声明一个反选的变量获取反选框
var fanxuan = document.querySelector("#fanxuan");
// 给全选框一个点击事件
checkAll.onclick = function() {
// 循环每一个水果选项,点击全选,让水果选项的选中状态和全选保持一致
for (var i = 0; i < inputAll.length; i++) {
inputAll[i].checked = checkAll.checked
}
}
// 循环所有水果选项
for (var i = 0; i < inputAll.length; i++) {
// 给每一个水果选项一个点击事件
inputAll[i].onclick = function() {
// 定义一个被选中状态的水果选项数量的初始值
var count = 0;
// 循环被选中水果的选项
for (var j = 0; j < inputAll.length; j++) {
// 判断如果选项被选中,count++
if (inputAll[j].checked == true) {
count++;
}
}
// 判断如果count++的值达到水果选项的总数,全选框为选中状态,反之有任意一个选项未被选中,全选框则为未选中状态
if (count == inputAll.length) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
}
}
fanxuan.onclick = function() {
// 循环每一个水果选项,点击取反
for (var i = 0; i < inputAll.length; i++) {
inputAll[i].checked = !inputAll[i].checked;
}
}
</script>
</body>
</html>
效果图: