基于javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a
更新時(shí)間：2016年01月28日 11:17:21 投稿：lijiao
這篇文章主要介紹了基于javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a，感興趣的小伙伴們可以參考一下
本文實(shí)例講解了javascript實(shí)現(xiàn)checkbox復(fù)選框的詳細(xì)代碼，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
function select_all(obj)
{
//取得由所有hobby構(gòu)成的一個(gè)數(shù)組對象
//如果表單中，存在多個(gè)同名的name，將產(chǎn)生一個(gè)數(shù)組
var arr = document.form1.hobby;
if(obj.checked)
{
//為true執(zhí)行代碼
for(var i=0;i<arr.length;i++)
{
arr[i].checked = true;
}
}else
{
//為false執(zhí)行代碼
for(var i=0;i<arr.length;i++)
{
arr[i].checked = false;
}
}
}
function select_no_all()
{
//取得所有的hobby對象
var arr = document.form1.hobby;
for(var i=0;i<arr.length;i++)
{
if(arr[i].checked)
{
//如果選中，則取消
arr[i].checked = false;
}else
{
//如果沒選中，則選中
arr[i].checked = true;
}
}
}
</script>
</head>
<body>
<form name="form1">
<fieldset>
<legend>選擇你感興趣的類別</legend>
<input type="checkbox" name="hobby" value="音樂" />音樂
<input type="checkbox" name="hobby" value="看書" />看書
<input type="checkbox" name="hobby" value="體育" />體育
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="電腦" />電腦<br />
<input type="checkbox" name="hobby" value="小說" />小說
<input type="checkbox" name="hobby" value="文學(xué)" />文學(xué)
<input type="checkbox" name="hobby" value="動(dòng)漫" />動(dòng)漫
<input type="checkbox" name="hobby" value="經(jīng)濟(jì)" />經(jīng)濟(jì)
<input type="checkbox" name="hobby" value="電影" />電影<br />
<input type="checkbox" name="hobby" value="美術(shù)" />美術(shù)
<input type="checkbox" name="hobby" value="管理" />管理
<input type="checkbox" name="hobby" value="歷史" />歷史
<input type="checkbox" name="hobby" value="旅游" />旅游
<input type="checkbox" name="hobby" value="戲劇" />戲劇
</fieldset>
<input type="checkbox" onclick="select_all(this)" value="全選" />全選
<input type="checkbox" onclick="select_no_all()" value="反選" />反選
</form>
</body>
</html>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
Javascript & DHTML DOM基礎(chǔ)和基本API
DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。2008-07-07
JS圖片左右無縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
下面小編就為大家?guī)硪黄狫S圖片左右無縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
xml轉(zhuǎn)json的js代碼，需要的朋友可以參考下2012-08-08
通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理
這篇文章主要介紹了通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
輕量級(jí)JS Cookie插件js-cookie的使用方法
js-cookie插件是一個(gè)JS操作cookie的插件，源文件只有3.34 KB，非常輕量級(jí)，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法2018-03-03
這篇文章主要介紹了簡單理解js的prototype屬性及使用 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)彈幕墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript數(shù)據(jù)結(jié)構(gòu)常見面試問題整理
在JavaScript中,數(shù)據(jù)結(jié)構(gòu)是指相互之間存在一種或多種特定關(guān)系的數(shù)據(jù)元素的集合,是帶有結(jié)構(gòu)特性的數(shù)據(jù)元素的集合。常用的數(shù)據(jù)結(jié)構(gòu)有:數(shù)組、列表、棧、隊(duì)列、鏈表、字典、集合等等2022-08-08