全选与反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #000;
width: 400px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("personid");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("personid");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
<tr>
<td><input type="checkbox" name="personid" /></td>
<td>张三</td>
<td>20</td>
<td>15033444455</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>李四</td>
<td>30</td>
<td>15033444456</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>王五</td>
<td>40</td>
<td>15033444457</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>赵六</td>
<td>50</td>
<td>15033444458</td>
</tr>
</table>
<input type="button" value="反选" onclick="reverse()"/>
</body>
</html>
运行结果如图：
当我点击“全选”时：
任意勾选：
当我点击“反选”时：
输入与显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
/*function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;//.value获取用户输入
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
/* if (isNaN(x) || x < 1 || x > 10) {//调用函数
text = "输入错误";
} else {
text = "输入正确";
}*/
// document.getElementById("demo").innerHTML = text;}
/*function changetext1(){
var x, text;
x = document.getElementById("numb").value;//.value获取用户输入
document.getElementById("A").innerHTML = text;*/
var text=["innovation","practice"];
function changetext(element){
var el= document.getElementById(element);
var input= document.getElementById('numb');
el.innerHTML =input.value;}
// el.innerHTML = document.getElementById("numb").value;
</script>
</head>
<body>
<p>请输入：</p>
<input id="numb" onchange="changetext('A')">
<!--<button type="button" οnclick="changetext()">提交</button>
<h1 id="A">xianshi!</h1>-->
<h1 onclick="changetext('A')">点击文本1!</h1>
<p id="A">显示!</p>
</body>
</html>
运行结果如图：
当我输入“12345”后：
输入与显示-2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function changetext(){
var x, text;
x = document.getElementById("numb").value;//.value获取用户输入
document.getElementById("A").innerHTML = text; }
/* var text=["innovation","practice"];
function changetext(element){
var el= document.getElementById(element);
var input= document.getElementById('numb');
el.innerHTML =input.value;}
// el.innerHTML = document.getElementById("numb").value;*/
</script>
</head>
<body>
<p>请输入：</p>
<input id="numb" onchange="changetext('A')">
<button type="button" onclick="changetext('A')">提交</button>
<h1 id="A">xianshi!</h1>
<!--<input id="numb" οnchange="changetext('A')">
<h1 οnclick="changetext('A')">点击文本1!</h1>
<p id="A">xianshi!</p>-->
</body>
</html>
运行结果如图：
当我输入“12345”后点击“提交”后：
JAVASCRIPT DOM 的知识到此告一段落啦，敬请期待新的学习周记吧!