javaEE (四）javaweb_JavaScript (5) 表單全選

阿新 • • 發佈：2018-12-22

Date：2018/11/17
在這裡插入圖片描述

效果如圖：點選一個，其他全選，可以復原：
在這裡插入圖片描述

原始碼：

<!-- 1、確定事件：onclick 繫結到複選框裡面； -->
<!-- 2、獲取複選框：var checkAllEle = document.getElementById("id") -->
<!-- 3、複選框狀態：checkAllEle.checked -->
<!-- 4、獲取下面所有複選框：document.getElementsByName("name") -->
<!-- 注： document.getElementById('checkAll' 
)返回的是一個集合(js裡面只有陣列，所以要用遍歷下標來運算元組) -->



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function checkAll(){
			var check = document.getElementsByName('checkOne');
			if(document.getElementById('checkAll' 
).checked == true){
				for(var i = 0; i < check.length; i++){
					check[i].checked = true;
				}
			}else{
					for(var i = 0; i < check.length; i++){
						check[i].checked = false;
						}
				 }
					
			}
					
					
	</script>


	<body>
		<table border="1" width="500" height="50" 
 align="center">
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="新增" />
						<input type="button" value="刪除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" onclick="checkAll()" id="checkAll" /></th>
					<th>編號</th>
					<th>姓名</th>
					<th>年齡</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>1</td>
					<td>張三</td>
					<td>22</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>4</td>
					<td>趙六</td>
					<td>29</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkOne" /></td>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原：原始碼：  <!-- 2、獲取複選框：var checkAllEle = document.getE

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。原始碼：  <!-

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

Date：2018/11/17 效果如圖所示，滑鼠進入表格變色，游標離開恢復原始碼：   <!D

javaEE (四）javaweb_JavaScript (4) 表格變色：隔行變色

效果如圖所示，隔行變色原始碼： <!-- 新標籤： <thead> <tr> <th> </th> </tr> </thead> <tbody> <

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

Date：2018/11/17 效果圖，籍貫選湖北，然後後面就會出現湖北的地級市: 原始碼： <!-- 1、事件(onchange)； 2、建立二維陣列儲存省份和城市；（陣列長度 = 最大角標+1） 3、獲取使用者選擇的省份(使用方法傳參的方式：th

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

Django小專案--待辦清單（四）（從表單中獲取資料並存入資料庫）

首先進入主頁（要記得先進入虛擬環境並且通過python mange.py runserver啟動本地伺服器），我們知道主頁匹配的網址是localhost:8000/todo/home，在瀏覽器上輸入並回車。在頁面的右上角有一個新增待辦事項的按鈕，輸入內容並點選新

html5學習筆記（四）增強的表單

color 這是HTML5新增的；可以建立一個顏色的選擇輸入框瀏覽器版本比較低的話有可能不支援，不同的瀏覽器支援程度不同 <input type=”color” > <formaction="" method="" target=""> 顏色：<input t

JS 實現表單全選和全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkAll(){

jQuery實現表單全選、全不選以及反選的功能

本文主要介紹了利用jQuery實現表單的全選、全不選以及反選的功能。對如下的form表單：  <form id="test-form" action="test"> <legend&g

Thymeleaf學習記錄（5）--運算及表單

Thymeleaf文字及預算：字面文字文字：'one text'，'Another one!'，... 號碼文字：0，34，3.0，12.3，... 布林文字：true，false 空字面： null 文字標記：one，sometext，m

ASP.NET MVC案例教程（基於ASP.NET MVC beta）——第四篇：傳遞表單資料

1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Release.aspx.cs" Inherits="MVCDemo.Views.Announce.Release"%> 2<%@ Import Namespace="

JaveWeb 公司項目（4）----- Easyui的表單驗證

過程 -- 目前要求今天和數希望小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸，可以看出目前我做的這個小項目已經有了一個大體的雛形，剩下的就是細節部分的打磨和一些友好的人機交互設計，今天做的是表單的驗證，作為初學者，著實花了一番功夫，所以寫一篇博文將這

（十二）easyUI之表單和驗證完成登錄頁面

() 成功 options 表單提交 odi 1-1 java ima 1.4 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Java Web開發總結（三） —— request接收表單提交中文參數亂碼問題

字符串 public servlet 參數 byte[] 解決操作 get span 1、以POST方式提交表單中文參數的亂碼問題 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"

django實現密碼加密的註冊（數據對象插入）-結合forms表單實現表單驗證

() -s 信息 unicode mit action strong clas under forms表單 #_*_coding:utf-8_*_ from django import forms class regis(forms.Form): usernam

Django系列（四）：多表操作

例如 get city 定義庫類修改配置銷售部 blog 返回 1、創建模型例：我們來假定下面這些概念，字段和關系　　作者模型：一個作者有姓名和年齡。　　作者詳細模型：把作者的詳情放到詳情表，包含生日，手機號，家庭住址等信息。作者詳情模型和作者模型之間是一對一（

2018/11/5表單

from表單三大重要屬性： <action>傳送瀏覽器後臺 <methon>提交的方式預設為get 看不見（post） <enctyp

PE檔案格式學習（四）：匯入表

UPDATE: 在文章的末尾更新了一張圖，在網上找的，有助於理解匯入表的結構 1.概述匯入表是逆向和病毒分析中比較重要的一個表，在分析病毒時幾乎第一時間都要看一下程式的匯入表的內容，判斷程式大概用了哪些功能。匯入表是資料目錄表中的第2個元素，排在匯出表的

程式質量管理（四）——關於配置表管理

通常情況下，應該保證配置表的一致性，但由於某些歷史原因，我的專案中，伺服器端和客戶端以不同的目錄維護了兩套相同的配置表，並由配表人員進行長期的人工維護。姑且不論這種做法是否正確，但在實際執行過程中，的確頻繁出現人工維護錯誤引起的缺陷。為此，我寫了一個例行檢查的工具來校驗兩份資料的一致性，也是千杯不倒

javaEE (四）javaweb_JavaScript (5) 表單全選

相關推薦