快捷導(dǎo)航

JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選

更新時(shí)間：2022年07月05日 11:36:26 作者：靜靜...

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選的具體代碼，供大家參考，具體內(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="賽車(chē)" />賽車(chē)
?? ??? ??? ?<input type="checkbox" name="hobby" id="" value="聽(tīng)音樂(lè)" />聽(tīng)音樂(lè)
?? ??? ??? ?<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>

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

您可能感興趣的文章:

相關(guān)文章

JS中使用正則表達(dá)式g模式和非g模式的區(qū)別
這篇文章給大家詳細(xì)介紹了JS中使用正則表達(dá)式g模式和非g模式的區(qū)別，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-04-04
JS Pro-深入面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的詳解
一般的面向?qū)ο蟪绦蛘Z(yǔ)言，有兩種繼承方法——接口繼承（interface inheritance）和實(shí)現(xiàn)繼承（implementation inheritance）。接口繼承只繼承方法簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。在JavaScript中，函數(shù)沒(méi)有簽名，所以在JavaScript只支持實(shí)現(xiàn)繼承，而且主要是依靠原型鏈（prototype chaining）來(lái)是實(shí)現(xiàn)的
2013-05-05
原生JS實(shí)現(xiàn)拖拽位置預(yù)覽
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽位置預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路
下面小編就為大家?guī)?lái)一篇淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-05-05
B/S(Web)實(shí)時(shí)通訊解決方案分享
這篇文章主要為大家分享了B/S(Web)實(shí)時(shí)通訊的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript中立即執(zhí)行函數(shù)實(shí)例詳解
javascript和其他編程語(yǔ)言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫(xiě)法，有時(shí)霧里看花，當(dāng)然，能理解各型各色的寫(xiě)法也是對(duì)javascript語(yǔ)言特性更進(jìn)一步的深入理解。這篇文章主要給大家介紹了關(guān)于JavaScript中立即執(zhí)行函數(shù)的相關(guān)資料，需要的朋友可以參考下。
2017-11-11
微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
這篇文章主要介紹了微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能,結(jié)合實(shí)例形式詳細(xì)分析了toast組件實(shí)現(xiàn)消息提示功能的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
JavaScript 閉包深入理解(closure)
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫(xiě)的大多是非常的學(xué)術(shù)和專(zhuān)業(yè)。對(duì)于初學(xué)者來(lái)說(shuō)別說(shuō)理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫(xiě)此文的目的就是用最通俗的文字揭開(kāi)Javascript閉包的真實(shí)面目。
2009-05-05
JavaScript中判斷數(shù)據(jù)類(lèi)型的方法總結(jié)
比如要判斷一個(gè)變量是否是數(shù)組類(lèi)型,PHP中有is_array()函數(shù)可以直接判斷,然而js中我們需要...-- well,下面我們就來(lái)詳細(xì)看一下JavaScript中判斷數(shù)據(jù)類(lèi)型的方法總結(jié)
2016-05-05
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對(duì)于大家學(xué)習(xí)javascript中的return知識(shí)有所幫助，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11