JavaScript實現(xiàn)頁面一鍵全選或反選
更新時間：2022年07月05日 11:36:26 作者：靜靜...
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)頁面一鍵全選或反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)頁面一鍵全選或反選的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?.hobby {
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background-color: #5F9EA0;
?? ??? ??? ??? ?line-height: 50px;
?? ??? ??? ?}
?
?? ??? ??? ?.but {
?? ??? ??? ??? ?float: right;
?? ??? ??? ??? ?margin-right: 10px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="hobby">
?? ??? ??? ?<!-- 創(chuàng)建多選框 -->
?? ??? ??? ?<input type="checkbox" checked="true" name="hobby" id="" value="羽毛球" />羽毛球
?? ??? ??? ?<input type="checkbox" name="hobby" id="" value="賽車" />賽車
?? ??? ??? ?<input type="checkbox" name="hobby" id="" value="聽音樂" />聽音樂
?? ??? ??? ?<input type="checkbox" name="hobby" id="" value="看雜志" />看雜志
?? ??? ??? ?<!-- 選擇按鈕 -->
?? ??? ??? ?<div class="but">
?? ??? ??? ??? ?<button type="button" onclick="selectAll(this)">全選</button>
?? ??? ??? ??? ?<button type="button" onclick="selectAllOut()">全不選</button>
?? ??? ??? ?</div>
?? ??? ?</div>
?
?? ??? ?<script type="text/javascript">
?? ??? ??? ?// 全選方法
?? ??? ??? ?function selectAll(obj) {
?? ??? ??? ??? ?var a = document.getElementsByName("hobby");
?? ??? ??? ??? ?for (var i = 0; i < a.length; i++) {
?? ??? ??? ??? ??? ?a[i].checked = "true";
?? ??? ??? ??? ??? ?console.log(a[i].value)
?? ??? ??? ??? ?}
?? ??? ??? ?};
?? ??? ??? ?// 全部取消方法
?? ??? ??? ?function selectAllOut() {
?? ??? ??? ??? ?var a = document.getElementsByName("hobby");
?? ??? ??? ??? ?for (var i = 0; i < a.length; i++)
?? ??? ??? ??? ??? ?a[i].checked = "";
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)的類marquee水平循環(huán)滾動
marquee （水平）循環(huán)滾動的js實現(xiàn) ,需要的朋友可以參考下。2010-03-03
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時候，對瀏覽器的兼容問題會感到很頭疼。這不，煩什么，什么就來了，特記錄下來，與大家分享。2010-05-05
詳解webpack import()動態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動態(tài)加載模塊踩坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了關(guān)于ios中視頻的最后一楨問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在JavaScript中，有3個關(guān)鍵字可以聲明變量：var、const和let，其中var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6及更晚的版本中使用，本文就來說說二者的區(qū)別，感興趣的可以了解一下2022-11-11
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用，text 組件的基本使用及rich-text 組件的基本使用，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
JavaScript中的null和undefined區(qū)別介紹
這篇文章主要介紹了JavaScript中的null和undefined區(qū)別介紹,JavaScript中存在2個代表信息不存在的特殊值：null和undefined,本文主要講解它們的區(qū)別,需要的朋友可以參考下2015-01-01
詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式
本篇文章主要介紹了詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式，具有一定的參考價值，有興趣的可以了解一下2017-11-11
javascript實現(xiàn)tabs選項卡切換效果(自寫原生js)
常用的頁面效果有彈出層效果，無縫滾動效果，選項卡切換效果，接下來與大家分享一款自己用原生javascript寫的選項卡切換效果，感興趣的朋友可以參考下哈2013-03-03
由于瀏覽器的安全限制,Javascript無法直接獲取用戶上傳文件的絕對路徑。但是我們可以通過一些技巧來獲取文件的相對路徑,這篇文章主要給大家介紹了關(guān)于js獲得相對路徑文件并上傳到服務(wù)器的相關(guān)資料,需要的朋友可以參考下2023-11-11