JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例

更新時(shí)間：2020年02月06日 10:33:13 作者：西紅柿里沒(méi)有番茄

這篇文章主要介紹了JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>

  function clickon() {
    // 獲取到body中所有checkbox
    var checkbox = document.querySelectorAll("input[type='checkbox']");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = true;
    }
  }

  function unclick() {
    var checkbox = document.querySelectorAll("input[type='checkbox']");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = false;
    }
  }

</script>
<body>

<form>
  <input type="checkbox">吃
  <input type="checkbox">喝
  <input type="checkbox">拉
  <input type="checkbox">撒
  <input type="button" value="全選" onclick="clickon()">
  <input type="button" value="全不選" onclick="unclick()">
</form>

</body>
</html>

效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js性能優(yōu)化技巧
性能優(yōu)化：簡(jiǎn)而言之，就是在不影響系統(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行地更快，完成特定功能所需的時(shí)間更短，本篇文章給大家介紹js性能優(yōu)化技巧，需要的朋友參考下
2015-11-11
JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法詳解
微信小程序有時(shí)需要函數(shù)里面調(diào)用函數(shù),下面這篇文章主要給大家介紹了關(guān)于微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
分享Javascript中最常用的55個(gè)經(jīng)典小技巧
這篇文章主要介紹了Javascript中最常用的55個(gè)經(jīng)典小技巧。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法,涉及JavaScript事件響應(yīng)、正則匹配及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
javascript 大中小字體顯示實(shí)現(xiàn)代碼
有時(shí)候頁(yè)面中的正文一般都加上了字體大中小控制代碼，方便瀏覽者閱讀。
2010-09-09
Openlayers實(shí)現(xiàn)測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)測(cè)量功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
再次更新！MSClass (Class Of Marquee Scroll通用不間斷滾動(dòng)JS封裝類(lèi) Ver 1.6)
再次更新！MSClass (Class Of Marquee Scroll通用不間斷滾動(dòng)JS封裝類(lèi) Ver 1.6)...
2007-02-02
簡(jiǎn)單對(duì)比分析JavaScript中的apply,call與this的使用
簡(jiǎn)單的說(shuō)call，apply都屬于Function.prototype的一個(gè)方法，它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的，因?yàn)閷儆贔unction.prototype，所以每個(gè)Function對(duì)象實(shí)例(就是每個(gè)方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對(duì)方法的了，這兩個(gè)方法是容易混淆的
2015-12-12
使用js去除字符串內(nèi)所帶有空格的三種方法
在前端開(kāi)發(fā)的過(guò)程中,我們經(jīng)常會(huì)遇到需要對(duì)于輸入的字符串進(jìn)行格式化處理,這篇文章主要給大家介紹了關(guān)于使用js去除字符串內(nèi)所帶有空格的三種方法,需要的朋友可以參考下
2023-10-10