欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

  • 使用JavaScript字符串解決回文數(shù)的方案詳解

    使用JavaScript字符串解決回文數(shù)的方案詳解

    這篇文章主要介紹了使用JavaScript字符串解決回文數(shù)的方案,JavaScript中的字符串是一種數(shù)據(jù)類型,用于表示文本數(shù)據(jù),字符串可以包含任意字符序列,包括字母、數(shù)字、符號和空格,靈活掌握字符串的解決問題思想,巧用字符串解決回文數(shù),需要的朋友可以參考下
    2024-05-05
  • 全面解析Bootstrap中form、navbar的使用方法

    全面解析Bootstrap中form、navbar的使用方法

    這篇文章主要為大家詳細解析了Bootstrap中form、navbar的使用方法，感興趣的朋友可以參考一下
    2016-05-05
  • 一些不錯的JS 自定義函數(shù)

    一些不錯的JS 自定義函數(shù)

    一些不錯的JS 自定義函數(shù) ，不少網(wǎng)站都在用，都是一些比較不錯的函數(shù)，可以拿來直接使用。建議學習。
    2009-08-08
  • js驗證身份證號碼記錄的方法

    js驗證身份證號碼記錄的方法

    在一些需要填寫身份證的表單網(wǎng)頁中，需要對身份證的輸入做一個驗證，于是，我記錄下了自己寫的驗證。這篇文章主要介紹了js驗證身份證號碼記錄的方法,需要的朋友可以參考下
    2019-04-04
  • JavaScript利用閉包實現(xiàn)模塊化

    JavaScript利用閉包實現(xiàn)模塊化

    本文主要介紹了JavaScript利用閉包實現(xiàn)模塊化的方法。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • 基于JS實現(xiàn)的隨機數(shù)字抽簽實例

    基于JS實現(xiàn)的隨機數(shù)字抽簽實例

    本文分享了基于JS實現(xiàn)的隨機數(shù)字抽簽的實例代碼。小編認為具很好的參考價值，感興趣的朋友可以看下
    2016-12-12
  • 淺談JSON.parse()和JSON.stringify()

    淺談JSON.parse()和JSON.stringify()

    本文給大家簡單描述了下JSON.parse()和JSON.stringify()的異同點，十分的實用，有需要的小伙伴可以參考下
    2015-07-07
  • 使用Three.js制作一個3D獎牌頁面

    使用Three.js制作一個3D獎牌頁面

    本文將使用React+Three.js技術(shù)棧，制作一個專屬的3D獎牌頁面，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手試一試
    2022-01-01
  • js中call()和apply()改變指針問題的講解

    js中call()和apply()改變指針問題的講解

    今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問題的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 登陸成功后自動計算秒數(shù)執(zhí)行跳轉(zhuǎn)

    登陸成功后自動計算秒數(shù)執(zhí)行跳轉(zhuǎn)

    本文實現(xiàn)的是這樣的一個功能登陸成功后自動查秒跳轉(zhuǎn)，具體示例如下，不了解的朋友可以學習下哦
    2014-01-01

最新評論