JS實現(xiàn)“全選”和"全不選"功能代碼實例
更新時間：2020年02月06日 10:33:13 作者：西紅柿里沒有番茄
這篇文章主要介紹了JS實現(xiàn)“全選”和"全不選"功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
這篇文章主要介紹了JS實現(xiàn)“全選”和"全不選"功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
代碼如下
<!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>
效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
開始模塊化開發(fā)項目之后，一個很重要的問題就是頁面見的跳轉(zhuǎn)問題，這篇文章主要介紹了Router解決跨模塊下的頁面跳轉(zhuǎn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Bootstrap3 多個模態(tài)對話框無法顯示的解決方案
這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)
本篇文章主要是對JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本文主要介紹了js中隱藏/顯示密碼的Zepto的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
three.js中文文檔學(xué)習(xí)之創(chuàng)建場景
這篇文章主要給大家介紹了three.js中文文檔學(xué)習(xí)之創(chuàng)建場景的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
js中setTimeout()與clearTimeout()用法實例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05
JavaScript使用sort函數(shù)實現(xiàn)漢字排序
JavaScript中的sort函數(shù)是一個強大且多用途的工具,能夠?qū)?shù)組的元素進行排序,而漢字按照拼音排序又是一個常見需求,下面我們就來看看如何使用JavaScript實現(xiàn)漢字排序吧2023-12-12
JavaScript中的console.log()函數(shù)詳細介紹
這篇文章主要介紹了JavaScript中的console.log()函數(shù)詳細介紹,本文講解了什么是console.log()、兼容沒有調(diào)試控制臺的瀏覽器、使用參數(shù)、使用其它日志級別等內(nèi)容,需要的朋友可以參考下2014-12-12
在uniapp中獲取位置信息處理,要兼容用戶同意授權(quán)、拒絕授權(quán)情況下,最終能成功獲取到位置信息的,本文給大家介紹uniapp中獲取位置信息處理步驟,感興趣的朋友跟隨小編一起看看吧2024-02-02
JavaScript中連接操作Oracle數(shù)據(jù)庫實例
這篇文章主要介紹了JavaScript中連接操作Oracle數(shù)據(jù)庫實例,本文講解了運行環(huán)境、代碼實例、運行結(jié)果等一系列完整步驟,需要的朋友可以參考下2015-04-04