全选文本框案例

全选文本框案例

返回顶部

全选文本框案例

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消

代码实现

Source code
  101 lines
<span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
 
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
 
<span class="hljs-tag"><<span class="hljs-name">head</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">
    * {
      <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
      <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
    }
 
    <span class="hljs-selector-tag">table</span> {
      <span class="hljs-attribute">border-collapse</span>: collapse;
      <span class="hljs-attribute">border-spacing</span>: <span class="hljs-number">0</span>;
      <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#c0c0c0</span>;
      <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
      <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span> auto;
      <span class="hljs-attribute">text-align</span>: center;
    }
 
    <span class="hljs-selector-tag">th</span> {
      <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#09c</span>;
      <span class="hljs-attribute">font</span>: bold <span class="hljs-number">16px</span> <span class="hljs-string">"微软雅黑"</span>;
      <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
      <span class="hljs-attribute">height</span>: <span class="hljs-number">24px</span>;
    }
 
    <span class="hljs-selector-tag">td</span> {
      <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#d0d0d0</span>;
      <span class="hljs-attribute">color</span>: <span class="hljs-number">#404060</span>;
      <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
    }
 
    <span class="hljs-selector-class">.allCheck</span> {
      <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;
    }
  </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
 
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">table</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"allCheck"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">""</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkAll"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"all"</span>></span>全选<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">th</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">th</span>></span>商品<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">th</span>></span>商家<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">th</span>></span>价格<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ck"</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米手机<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>￥1999<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ck"</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米净水器<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>￥4999<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ck"</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米电视<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>小米<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">td</span>></span>￥5999<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">table</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
    <span class="hljs-comment">//获取元素</span>
    <span class="hljs-keyword">const</span> checkAll = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#checkAll'</span>)
    <span class="hljs-comment">//获取小复选框</span>
    <span class="hljs-keyword">const</span> cks = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.ck'</span>)
    <span class="hljs-comment">//点击大复选框 注册事件</span>
    checkAll.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
      <span class="hljs-comment">//获取选中状态</span>
      <span class="hljs-comment">//遍历所有小复选框</span>
      <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < cks.<span class="hljs-property">length</span>; i++) {
        cks[i].<span class="hljs-property">checked</span> = checkAll.<span class="hljs-property">checked</span>
      }
    })
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < cks.<span class="hljs-property">length</span>; i++) {
      cks[i].<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
        <span class="hljs-keyword">const</span> num = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.ck:checked'</span>).<span class="hljs-property">length</span>
        <span class="hljs-keyword">if</span> (num === cks.<span class="hljs-property">length</span>) {
          checkAll.<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>
        }
      })
    }
  </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
 
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

1. 全选文本框案例
2. 代码实现

全选文本框案例

https://blog.4zero4.cn/archives/wDsyoXZJ

作者

404 Not Found

发布于

Nov 07, 2024

更新于

Nov 07, 2024

版权协议

定时器-随机点名案例练习

搜索框练习

参与讨论

左滑关闭

加载中

😀
颜文字

- 😀
- 😁
- 😂
- 🤣
- 😃
- 😄
- 😅
- 😆
- 😉
- 😊
- 😋
- 😎
- 😍
- 😘
- 🥰
- 😗
- 😙
- 🥲
- 😚
- 🧐
- 🙂
- 🤗
- 🤩
- 🤔
- 🫡
- 🤨
- 😐
- 😑
- 😶
- 🫥
- 😶‍🌫️
- 🙄
- 😏
- 😣
- 😥
- 😮
- 🤐
- 😯
- 😪
- 😫
- 🥱
- 😴
- 😌
- 😛
- 😜
- 😝
- 🤤
- 😒
- 😓
- 😔
- 😕
- 🫤
- 🙃
- 🫠
- 🤑
- 😲
- ☹️
- 🙁
- 😖
- 😞
- 😟
- 😤
- 😢
- 😭
- 😦
- 😧
- 😨
- 😩
- 🤯
- 😬
- 😮‍💨
- 😰
- 😱
- 🥵
- 🥶
- 😳
- 🤪
- 😵
- 😵‍💫
- 🥴
- 😠
- 😡
- 🤬
- 😷
- 🤒
- 🤕
- 🤢
- 🤮
- 🤧
- 😇
- 🥳
- 🥸
- 🥺
- 🥹
- 🤠
- 🤡
- 🤥
- 🤫
- 🤭
- 🫢
- 🫣
- 🤓
- 💀
- 💩
- 👻
- (*>.<*)
- ・ࡇ・
- ´༥`
- ᵕ᷄≀ ̠ᵕ᷅
- ˙ϖ˙
- ฅ ˘ฅ
- ˙Ⱉ˙ฅ
- ˃̶͈ ˂̶͈
- ଲଇଉକ
- ꈍ◡ꈍ
- ꒰⑅•ᴗ•⑅꒱
- (•̤̀ᵕ•̤́๑)ᵒᵏᵎᵎᵎᵎ
- ฅ(๑ ̀ㅅ ́๑)ฅ
- ꒰ᐢ⸝⸝•༝•⸝⸝ᐢ꒱
- u (҂`･ｪ･´) <,︻╦̵̵̿╤─ ҉ - --
- (* ⁰̷̴͈꒨⁰̷̴͈)=͟͟͞͞➳♥
- ˃̣̣̥᷄⌓˂̣̣̥᷅
- ♪⸜(๑ ॑꒳ ॑๑)⸝♪✰
- (๑ᵒ̴̶̷͈᷄ᗨᵒ̴̶̷͈᷅) (৹ᵒ̴̶̷᷄́ฅᵒ̴̶̷᷅৹) (⸝⸝⸝ᵒ̴̶̷̥́ ⌑ ᵒ̴̶̷̣̥̀⸝⸝⸝)
- ꉂ೭(˵¯̴͒ꇴ¯̴͒˵)౨
- ( ง⁼̴̀ω⁼̴́)ง⁼³₌₃
- ( ๑╹ ꇴ╹) ｸﾞｯ!
- ✧(≖ ◡ ≖✿)
- Σ(๑º㉨º๑ ) d(ŐдŐ๑) Σ(ﾟдﾟlll)
- (๑♡3♡๑)
- (｡˘•ε•˘｡)
- ฅ՞•ﻌ•՞ฅ
- ฅฅ*~
- (♡ര‿ര)
- ԅ(≖‿≖ԅ)
- | ू•ૅω•́)ᵎᵎᵎ
- (｡•ˇ‸ˇ•｡)
- ¦•ˇ₃ˇ•｡)
- °꒰๑'ꀾ'๑꒱°
- ( ॢꈍ૩ꈍ) ॢḟ৹ʳᵧ৹ᵤ
- ☂꒰´•௰•`๑꒱…
- ⚆_⚆？
- ( ˃̶͈◡˂̶͈ ) hi!

返回底部

勾选保存信息