JavaScript實現頁面一鍵全選或反選
更新時間：2022年07月05日 11:36:26 作者：靜靜...
這篇文章主要為大家詳細介紹了JavaScript實現頁面一鍵全選或反選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現頁面一鍵全選或反選的具體代碼，供大家參考，具體內容如下
<!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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章給大家詳細介紹了JS中使用正則表達式g模式和非g模式的區(qū)別，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-04-04
一般的面向對象程序語言，有兩種繼承方法——接口繼承（interface inheritance）和實現繼承（implementation inheritance）。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。在JavaScript中，函數沒有簽名，所以在JavaScript只支持實現繼承，而且主要是依靠原型鏈（prototype chaining）來是實現的2013-05-05
這篇文章主要為大家詳細介紹了原生JS實現拖拽位置預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
淺析javascript異步執(zhí)行函數導致的變量變化問題解決思路
下面小編就為大家?guī)硪黄獪\析javascript異步執(zhí)行函數導致的變量變化問題解決思路。小編覺得挺不錯的，現在分享給大家，也給大家做個參考2016-05-05
這篇文章主要為大家分享了B/S(Web)實時通訊的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關于JavaScript中立即執(zhí)行函數的相關資料，需要的朋友可以參考下。2017-11-11
微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
這篇文章主要介紹了微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能,結合實例形式詳細分析了toast組件實現消息提示功能的相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
最近在網上查閱了不少Javascript閉包(closure)相關的資料，寫的大多是非常的學術和專業(yè)。對于初學者來說別說理解閉包了，就連文字敘述都很難看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實面目。2009-05-05
比如要判斷一個變量是否是數組類型,PHP中有is_array()函數可以直接判斷,然而js中我們需要...-- well,下面我們就來詳細看一下JavaScript中判斷數據類型的方法總結2016-05-05
Javascript中的return作用及javascript return關鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關鍵字用法詳解，對于大家學習javascript中的return知識有所幫助，感興趣的朋友一起學習吧2015-11-11