復(fù)選框全選與全不選操作實(shí)現(xiàn)思路
更新時(shí)間：2013年08月18日 15:54:56 作者：
通過js簡(jiǎn)單實(shí)現(xiàn)下復(fù)選框全選與全不選，很常用的一個(gè)操作，具體實(shí)現(xiàn)思路及代碼如下，有需求的朋友可以參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>
<html>
<head>
<title>復(fù)選框處理.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="checkbox" id="checkItem">全選/全不選
<br>
<h3>愛好</h3>
<input type="checkbox" name="item">看書
<br>
<input type="checkbox" name="item">聽音樂
<br>
<input type="checkbox" name="item">打球
<br>
<input type="checkbox" name="item">散步
<br>
<input type="checkbox" name="item">寫代碼
<br>
<script>
window.onload = function(){
var checkItem = document.getElementById("checkItem").onclick = function(){
var itemsElement = document.getElementsByName("item");
for (var i = 0; i < itemsElement.length; i++) {
var itemElement = itemsElement[i];
if (this.checked) {
itemElement.checked = "checked";
}
else {
itemElement.checked = null;
}
}
}
}
</script>
</body>
</html>
</SPAN>
相關(guān)文章
最全面的百度地圖JavaScript離線版開發(fā),這篇文章主要為大家詳細(xì)介紹了JavaScript離線版開發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持,介紹如何在生成表單后，可以支持上傳圖片后可以及時(shí)預(yù)覽圖片的功能，需要的朋友可以參考下2016-06-06
javascript 觸發(fā)HTML元素綁定的函數(shù)
只能觸發(fā)函數(shù)的執(zhí)行，并不能完全模擬出實(shí)際的點(diǎn)擊。2010-09-09
學(xué)習(xí)JavaScript一定要知道的3個(gè)小技巧
這篇文章主要給大家分享的是學(xué)習(xí)JavaScript一定要知道的3個(gè)小技巧，通常在 Angular 或 React 項(xiàng)目中，code review 時(shí)看到一些老式的 JavaScript 代碼，就會(huì)將開發(fā)人員歸類為初學(xué)者，下面我們就來(lái)一起看看初學(xué)者需要知道的三個(gè)小技巧,需要的朋友可以參考一下2021-12-12
Javascript技術(shù)技巧大全（五）...2007-01-01
jQuery $.data()方法使用注意細(xì)節(jié)
前段時(shí)間同事在群里對(duì)jQuery里的.data()方法接下來(lái)介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下2012-12-12
本篇文章主要是對(duì)JS中的構(gòu)造函數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法
IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法，需要的朋友可以參考下。2011-04-04
這篇文章主要為大家介紹了javascript冒泡排序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
QQ郵箱的一個(gè)文本編輯器代碼...2007-03-03