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)文章

使用JavaScript字符串解決回文數(shù)的方案詳解
這篇文章主要介紹了使用JavaScript字符串解決回文數(shù)的方案,JavaScript中的字符串是一種數(shù)據(jù)類型,用于表示文本數(shù)據(jù),字符串可以包含任意字符序列,包括字母、數(shù)字、符號(hào)和空格,靈活掌握字符串的解決問題思想,巧用字符串解決回文數(shù),需要的朋友可以參考下
2024-05-05
全面解析Bootstrap中form、navbar的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中form、navbar的使用方法，感興趣的朋友可以參考一下
2016-05-05
一些不錯(cuò)的JS 自定義函數(shù)
一些不錯(cuò)的JS 自定義函數(shù) ，不少網(wǎng)站都在用，都是一些比較不錯(cuò)的函數(shù)，可以拿來直接使用。建議學(xué)習(xí)。
2009-08-08
js驗(yàn)證身份證號(hào)碼記錄的方法
在一些需要填寫身份證的表單網(wǎng)頁(yè)中，需要對(duì)身份證的輸入做一個(gè)驗(yàn)證，于是，我記錄下了自己寫的驗(yàn)證。這篇文章主要介紹了js驗(yàn)證身份證號(hào)碼記錄的方法,需要的朋友可以參考下
2019-04-04
JavaScript利用閉包實(shí)現(xiàn)模塊化
本文主要介紹了JavaScript利用閉包實(shí)現(xiàn)模塊化的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽實(shí)例
本文分享了基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽的實(shí)例代碼。小編認(rèn)為具很好的參考價(jià)值，感興趣的朋友可以看下
2016-12-12
淺談JSON.parse()和JSON.stringify()
本文給大家簡(jiǎn)單描述了下JSON.parse()和JSON.stringify()的異同點(diǎn)，十分的實(shí)用，有需要的小伙伴可以參考下
2015-07-07
使用Three.js制作一個(gè)3D獎(jiǎng)牌頁(yè)面
本文將使用React+Three.js技術(shù)棧，制作一個(gè)專屬的3D獎(jiǎng)牌頁(yè)面，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試
2022-01-01
js中call()和apply()改變指針問題的講解
今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問題的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
登陸成功后自動(dòng)計(jì)算秒數(shù)執(zhí)行跳轉(zhuǎn)
本文實(shí)現(xiàn)的是這樣的一個(gè)功能登陸成功后自動(dòng)查秒跳轉(zhuǎn)，具體示例如下，不了解的朋友可以學(xué)習(xí)下哦
2014-01-01