JavaScript實現(xiàn)全選和全不選操作

更新時間：2021年09月09日 11:13:39 作者：Cavewang

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)全選和全不選操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)全選和全不選操作的具體代碼，供大家參考，具體內(nèi)容如下

效果示例

默認狀態(tài)下：

勾選全選時：

任意取消勾選物品A/物品B/物品C時

實現(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>序號</th>
    <th>名稱</th>
    <th>單價</th>
    <th>數(shù)量</th>
    <th>總計</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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

學習JavaScript鼠標響應事件
這篇文章主要帶領大家學習JavaScript鼠標響應事件，為大家分享了一個簡單的鼠標模擬案例，感興趣的小伙伴們可以參考一下
2015-12-12
JS中的art-template模板如何使用if判斷
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
深入理解JavaScript 參數(shù)按值傳遞
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
深入淺析JavaScript中的in關鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關鍵字和for-in循環(huán)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
用JS寫的一個TableView控件代碼
JS寫的一個TableView控件代碼，方便輸出表格。
2010-01-01
js面向對象之靜態(tài)方法和靜態(tài)屬性實例分析
這篇文章主要介紹了js面向對象之靜態(tài)方法和靜態(tài)屬性,實例分析了靜態(tài)方法和靜態(tài)屬性的原理及應用,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
微信小程序輪播圖實現(xiàn)原理及優(yōu)化詳解
這篇文章主要介紹了微信小程序輪播圖實現(xiàn)原理及優(yōu)化詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
JavaScript實現(xiàn)頁面跳轉的方式匯總
這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉的方式匯總的相關資料,需要的朋友可以參考下
2016-05-05
layui 點擊重置按鈕, select 并沒有被重置的解決方法
今天小編就為大家分享一篇layui 點擊重置按鈕, select 并沒有被重置的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS?的繼承方式與使用場景對比分析
本文介紹了JavaScript中六種主要的繼承實現(xiàn)方式及其適用場景,并推薦在現(xiàn)代項目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點和適用范圍,選擇合適的繼承方式對于編寫清晰、高效的JavaScript代碼至關重要,感興趣的朋友一起看看吧
2025-02-02