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>