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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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判斷
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
深入理解JavaScript 參數(shù)按值傳遞
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
用JS寫的一個(gè)TableView控件代碼
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)化詳解,文中通過(guò)示例代碼介紹的非常詳細(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 并沒(méi)有被重置的解決方法
今天小編就為大家分享一篇layui 點(diǎn)擊重置按鈕, select 并沒(méi)有被重置的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS?的繼承方式與使用場(chǎng)景對(duì)比分析
本文介紹了JavaScript中六種主要的繼承實(shí)現(xiàn)方式及其適用場(chǎng)景,并推薦在現(xiàn)代項(xiàng)目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點(diǎn)和適用范圍,選擇合適的繼承方式對(duì)于編寫清晰、高效的JavaScript代碼至關(guān)重要,感興趣的朋友一起看看吧
2025-02-02