JavaScript實(shí)現(xiàn)全選和全不選操作
更新時(shí)間：2021年09月09日 11:13:39 作者：Cavewang
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)全選和全不選操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)全選和全不選操作的具體代碼，供大家參考，具體內(nèi)容如下
效果示例
默認(rèn)狀態(tài)下：
勾選全選時(shí)：
任意取消勾選物品A/物品B/物品C時(shí)
實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選</title>
<script>
function myAll() {
var all = document.getElementById("all");
var oneList = document.getElementsByName("one");
for(var i = 0; i < oneList.length; i++) {
oneList[i].checked = all.checked;
}
}
function myOne() {
var all = document.getElementById("all");
var oneList = document.getElementsByName("one");
for(var i = 0; i < oneList.length; i++) {
if(oneList[i].checked == false) {
all.checked = false;
return;
}
}
all.checked = true;
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
<tr>
<th>全選<input id="all" type="checkbox" onclick="myAll()" /></th>
<th>序號(hào)</th>
<th>名稱</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>總計(jì)</th>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>1</td>
<td>物品A</td>
<td>￥55</td>
<td>1</td>
<td>￥55</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>2</td>
<td>物品B</td>
<td>￥70</td>
<td>1</td>
<td>￥70</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>3</td>
<td>物品C</td>
<td>￥66</td>
<td>1</td>
<td>￥66</td>
</tr>
</table>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)全選和全不選
- js實(shí)現(xiàn)全選和全不選功能
- Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
- JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例
- 原生JS版和jquery版實(shí)現(xiàn)checkbox的全選/全不選/點(diǎn)選/行內(nèi)點(diǎn)選(Mr.Think)
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能
- js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選全不選功能
- 使用js如何實(shí)現(xiàn)全選與全不選
- jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
相關(guān)文章
學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件，為大家分享了一個(gè)簡(jiǎn)單的鼠標(biāo)模擬案例，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
JS寫的一個(gè)TableView控件代碼，方便輸出表格。2010-01-01
js面向?qū)ο笾o態(tài)方法和靜態(tài)屬性實(shí)例分析
這篇文章主要介紹了js面向?qū)ο笾o態(tài)方法和靜態(tài)屬性,實(shí)例分析了靜態(tài)方法和靜態(tài)屬性的原理及應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
微信小程序 輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解
這篇文章主要介紹了微信小程序 輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式匯總
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式匯總的相關(guān)資料,需要的朋友可以參考下2016-05-05
layui 點(diǎn)擊重置按鈕, select 并沒有被重置的解決方法
今天小編就為大家分享一篇layui 點(diǎn)擊重置按鈕, select 并沒有被重置的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文介紹了JavaScript中六種主要的繼承實(shí)現(xiàn)方式及其適用場(chǎng)景,并推薦在現(xiàn)代項(xiàng)目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點(diǎn)和適用范圍,選擇合適的繼承方式對(duì)于編寫清晰、高效的JavaScript代碼至關(guān)重要,感興趣的朋友一起看看吧2025-02-02