JavaScript表单元素的属性操作
disabled、selected、checked
当HTML中的标签的属性，只有一个值的时候，DOM中对应的元素的属性值是布尔类型
- 即使对
input标签设置了disabled属性，仍然可以用value属性来改变文本框的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮">
<input type="button" value="设置文本">
<input type="text" name="" id="txt" value="123">
<script>
var btns = document.querySelectorAll('input[type=button]');
btns[0].onclick = function() {
txt.disabled = true;
console.log(txt.disabled);
}
btns[1].onclick = function () {
txt.value = "hhhhh";
}
</script>
</body>
</html>
案例：给文本框赋值
如果有大量的字符串进行拼接的时候应该避免有
+号来进行拼接。
可以采用数组的方法来进行拼接，每遇到一个字符串的时候进行push方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="button" value = "打印">
<script>
var ipts = document.getElementsByTagName("input");
console.log(ipts[0].type);
// 给文本框赋值
for (var i = 0; i < ipts.length; i++) {
if (ipts[i].type == "text") {
ipts[i].value = i;
}
}
// 输出文本框的value值，以|分割
var btn = ipts[ipts.length - 1];
btn.onclick = function(){
var arr = [];
for (var i = 0;i < ipts.length; i++) {
if (ipts[i].type == 'text') {
arr.push(ipts[i].value);
}
}
console.log(arr.join('|'));
}
</script>
</body>
</html>
案例：随机设置下拉框中的选中项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="选择">
<select name="" id="select">
<option value="">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
</select>
<script>
var btn = document.getElementsByTagName("input")[0]; // 获取按钮
var select = document.getElementById("select"); // 获取下拉列表
btn.onclick = function () {
var opts = select.children; // 获取到所有的option
var randomIndex = Math.floor(Math.random() * opts.length);
opts[randomIndex].selected = true;
}
</script>
</body>
</html>
案例：搜索文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索文本框</title>
</head>
<body>
<input type="text" name="" id="txt" placeholder="请输入搜索的内容">
<script>
var txt= document.getElementById("txt");
txt.onfocus = function() {
this.placeholder = '';
}
txt.onblur = function() {
if (txt.value.length === 0) {
this.placeholder = '请输入搜索内容';
}
}
</script>
</body>
</html>
全选反选案例
样例图片
js代码
var parent = document.getElementById("parent"); // 获取标题栏的复选框
var tbody = table.tBodies[0];
var children = tbody.getElementsByTagName("input"); // 获取所有商品列表的复选框
var btn = document.getElementsByTagName("button")[0]; // 获取反选
// 设置标题的复选框
parent.onclick = function () {
for (var i = 0; i < children.length; i++) {
if (children[i].type !== 'checkbox') {
continue;
}
// 为每个商品列表的复选框赋值
children[i].checked = this.checked;
}
}
// 设置每个商品列表的复选框
for (var i = 0; i < children.length; i++) {
if (children[i].type !== 'checkbox') {
continue;
}
children[i].onclick = function () {
isAllChecked();
}
}
btn.onclick = function () {
for (var i = 0; i < children.length; i++) {
children[i].checked = !children[i].checked;
}
isAllChecked();
}
function isAllChecked() {
// 假设已经全部选中
var flag = true;
// 检查是否全部选中了
for (var i = 0; i < children.length; i++) {
if (children[i].type !== 'checkbox') {
continue;
}
// 判断每个商品列表是否已经被选中
if (!children[i].checked) {
flag = false;
}
}
// 为标题的复选框设置选中还是未选中
parent.checked = flag;
}