基于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>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
function select_all(obj)
{
//取得由所有hobby構(gòu)成的一個(gè)數(shù)組對(duì)象
//如果表單中，存在多個(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對(duì)象
var arr = document.form1.hobby;
for(var i=0;i<arr.length;i++)
{
if(arr[i].checked)
{
//如果選中，則取消
arr[i].checked = false;
}else
{
//如果沒(méi)選中，則選中
arr[i].checked = true;
}
}
}
</script>
</head>
<body>
<form name="form1">
<fieldset>
<legend>選擇你感興趣的類(lèi)別</legend>
<input type="checkbox" name="hobby" value="音樂(lè)" />音樂(lè)
<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="電腦" />電腦<br />
<input type="checkbox" name="hobby" value="小說(shuō)" />小說(shuō)
<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>
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
js判斷手機(jī)端(Android手機(jī)還是iPhone手機(jī))
現(xiàn)在使用手機(jī)上網(wǎng)的人越來(lái)越多，一些下載網(wǎng)站會(huì)通過(guò)判斷不同系統(tǒng)手機(jī)來(lái)訪(fǎng)問(wèn)不同網(wǎng)頁(yè)，比如iPhone和Android。下面我們就來(lái)介紹一下如何用javascript判斷iPhone或Android手機(jī)訪(fǎng)問(wèn)2015-07-07
基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用
IIFE全拼Imdiately Invoked Function Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例
這篇文章主要介紹了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
JavaScript實(shí)現(xiàn)自定義媒體播放器方法介紹
本文主要介紹了JavaScript自定義媒體播放器的實(shí)現(xiàn)過(guò)程與方法，具有一定的參考作用，下面跟著小編一起來(lái)看下吧2017-01-01
JS+CSS實(shí)現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼,可實(shí)現(xiàn)滑塊彈性振動(dòng)效果的導(dǎo)航效果,涉及jQuery數(shù)學(xué)運(yùn)算及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09
javascript jquery對(duì)form元素的常見(jiàn)操作詳解
下面小編就為大家?guī)?lái)一篇javascript jquery對(duì)form元素的常見(jiàn)操作詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)HTML表格排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了Ionic2開(kāi)發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南
這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開(kāi)發(fā)指南,兼容uniapp版本,需要的朋友可以參考下2023-12-12