JavaScript函数实例(一)

时间 2019-11-17

原文原文链接

简单实例一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操做</title>
</head>
<body>
<ul>
  <li><input type="checkbox" name="like" value="1" />看电影</li>
  <li><input type="checkbox" name="like" value="2" />玩游戏</li>
  <li><input type="checkbox" name="like" value="3" />看小说</li>
  <li><input type="checkbox" name="like" value="4" />读书</li>
  <li><input type="checkbox" name="like" value="5" />运动</li>
  <li>
    <button onclick="doSelect(1);">全选</button>
    <button onclick="doSelect(0);">全不选</button>
    <button onclick="doSelect(2);">反选</button>
  </li>
</ul>
<script type="text/javascript">
function doSelect(e){
  // 获取页面中全部的input
  var input = document.getElementsByTagName("input");

  // 循环
  for(var i = 0;i < input.length;i++){
    switch(e){
      case 1:   // 全选
        input[i].checked = true;  // checked是checkbox对象的一个属性
        break;
      case 0:   // 全不选
        input[i].checked = false;
        break;
      case 2:   // 反选
        input[i].checked = !input[i].checked;
        break;
    }
  }
}
</script>
</body>
</html>

简单实例二： javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操做</title>
</head>
<body>
<input type="checkbox" id="selectAll" />全选
<input type="checkbox" id="selectNone" />全不选
<input type="checkbox" id="selectOther" />反选
<form name="myForm">
<input type="checkbox" name="like" value="1" />看电影 <br />
<input type="checkbox" name="like" value="2" />玩游戏 <br />
<input type="checkbox" name="like" value="3" />看小说 <br />
<input type="checkbox" name="like" value="4" />读书 <br />
<input type="checkbox" name="like" value="5" />运动 <br />
</form>
<script type="text/javascript">
// 获取三个选择按钮
var all   = document.getElementById("selectAll");
var none  = document.getElementById("selectNone");
var other = document.getElementById("selectOther");
// 获取表单中的复选框
var list = document.myForm.like;
function doSelect(e){
  for(var i = 0; i<list.length;i++){
    switch(e){
      case 1:
        list[i].checked = true;
        break;
      case 0:
        list[i].checked = false;
        break;
      case 2:
        list[i].checked = !list[i].checked;
        break;
    }
  }
}
all.onclick = function(){
  if(all.checked){
    // 取消另外两个的选择状态
    none.checked  = false;
    other.checked = false;
    doSelect(1);
  } else {
    doSelect(0);
  }
}
none.onclick = function(){
  if(none.checked){
    // 取消另外两个的选择状态
    all.checked  = false;
    other.checked = false;
    doSelect(0);
  } else {
    doSelect(0);
  }
}
other.onclick = function(){
  if(other.checked){
    // 取消另外两个的选择状态
    none.checked  = false;
    all.checked = false;
    doSelect(2);
  } else {
    doSelect(2);
  }
}
</script>
</body>
</html>

简单实例三：综合上面两个进行优化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操做</title>
</head>
<body>
<div id="select">
  <input type="checkbox" onclick="doSelect(1,this);" />全选
  <input type="checkbox" onclick="doSelect(0,this);" />全不选
  <input type="checkbox" onclick="doSelect(2,this);" />反选
</div>
<form name="myForm">
  <input type="checkbox" name="like" value="1" />看电影 <br />
  <input type="checkbox" name="like" value="2" />玩游戏 <br />
  <input type="checkbox" name="like" value="3" />看小说 <br />
  <input type="checkbox" name="like" value="4" />读书 <br />
  <input type="checkbox" name="like" value="5" />运动 <br />
</form>
<script type="text/javascript">
function doSelect(e,t){
  var s = document.getElementById('select').getElementsByTagName("input");
  for(var i = 0; i<s.length;i++){
    s[i].checked = false;
  }
  t.checked = true;
  // 获取表单中的复选框
  var list = document.myForm.like;
  for(var i = 0; i<list.length;i++){
    switch(e){
      case 1:
        list[i].checked = true;
        break;
      case 0:
        list[i].checked = false;
        break;
      case 2:
        list[i].checked = !list[i].checked;
        break;
    }
  }
}
</script>
</body>
</html>

1. JavaScript 函数用法实例
2. javascript 回调函数例子
3. 函数实例
4. JavaScript 实用函数
5. Javascript 函数一览
6. OracleSpatial函数实例
7. mysql函数实例
8. hive函数实例
9. 函数实例 _Code
10. JavaScript实现函数重载
更多相关文章...
• XML DOM 实例 - XML DOM 教程
• XML 实例 - XML 教程
• Docker容器实战(一) - 封神Server端技术
• Java Agent入门实战（一）-Instrumentation介绍与使用