<!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="聽音樂(lè)" />聽音樂(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實(shí)現(xiàn)的類marquee水平循環(huán)滾動(dòng)
marquee （水平）循環(huán)滾動(dòng)的js實(shí)現(xiàn) ,需要的朋友可以參考下。
2010-03-03
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時(shí)候，對(duì)瀏覽器的兼容問(wèn)題會(huì)感到很頭疼。這不，煩什么，什么就來(lái)了，特記錄下來(lái)，與大家分享。
2010-05-05
詳解webpack import()動(dòng)態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動(dòng)態(tài)加載模塊踩坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
ios中視頻的最后一楨問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于ios中視頻的最后一楨問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
詳解JavaScript中var和let的區(qū)別
在JavaScript中，有3個(gè)關(guān)鍵字可以聲明變量：var、const和let，其中var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6及更晚的版本中使用，本文就來(lái)說(shuō)說(shuō)二者的區(qū)別，感興趣的可以了解一下
2022-11-11
微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用，text 組件的基本使用及rich-text 組件的基本使用，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-10-10
JavaScript中的null和undefined區(qū)別介紹
這篇文章主要介紹了JavaScript中的null和undefined區(qū)別介紹,JavaScript中存在2個(gè)代表信息不存在的特殊值：null和undefined,本文主要講解它們的區(qū)別,需要的朋友可以參考下
2015-01-01
詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式
本篇文章主要介紹了詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-11-11
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
常用的頁(yè)面效果有彈出層效果，無(wú)縫滾動(dòng)效果，選項(xiàng)卡切換效果，接下來(lái)與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果，感興趣的朋友可以參考下哈
2013-03-03
js獲得相對(duì)路徑文件并上傳到服務(wù)器的方法
由于瀏覽器的安全限制,Javascript無(wú)法直接獲取用戶上傳文件的絕對(duì)路徑。但是我們可以通過(guò)一些技巧來(lái)獲取文件的相對(duì)路徑,這篇文章主要給大家介紹了關(guān)于js獲得相對(duì)路徑文件并上傳到服務(wù)器的相關(guān)資料,需要的朋友可以參考下
2023-11-11