基于javascript實現(xiàn)checkbox復(fù)選框?qū)嵗a

更新時間：2016年01月28日 11:17:21 投稿：lijiao

這篇文章主要介紹了基于javascript實現(xiàn)checkbox復(fù)選框?qū)嵗a，感興趣的小伙伴們可以參考一下

本文實例講解了javascript實現(xiàn)checkbox復(fù)選框的詳細代碼，分享給大家供大家參考，具體內(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)成的一個數(shù)組對象
  //如果表單中，存在多個同名的name，將產(chǎn)生一個數(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="動漫" />動漫
  <input type="checkbox" name="hobby" value="經(jīng)濟" />經(jīng)濟
  <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è)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

js判斷手機端(Android手機還是iPhone手機)
現(xiàn)在使用手機上網(wǎng)的人越來越多，一些下載網(wǎng)站會通過判斷不同系統(tǒng)手機來訪問不同網(wǎng)頁，比如iPhone和Android。下面我們就來介紹一下如何用javascript判斷iPhone或Android手機訪問
2015-07-07
基于JS代碼實現(xiàn)導(dǎo)航條彈出式懸浮菜單
這篇文章主要介紹了基于JS代碼實現(xiàn)導(dǎo)航條彈出式懸浮菜單的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用
IIFE全拼Imdiately Invoked Function Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
JS動態(tài)圖片的實現(xiàn)方法完整示例
這篇文章主要介紹了JS動態(tài)圖片的實現(xiàn)方法,結(jié)合完整實例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
JavaScript實現(xiàn)自定義媒體播放器方法介紹
本文主要介紹了JavaScript自定義媒體播放器的實現(xiàn)過程與方法，具有一定的參考作用，下面跟著小編一起來看下吧
2017-01-01
JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
這篇文章主要介紹了JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼,可實現(xiàn)滑塊彈性振動效果的導(dǎo)航效果,涉及jQuery數(shù)學(xué)運算及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下
2015-09-09
javascript jquery對form元素的常見操作詳解
下面小編就為大家?guī)硪黄猨avascript jquery對form元素的常見操作詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS實現(xiàn)HTML表格排序功能
這篇文章主要為大家詳細介紹了JS實現(xiàn)HTML表格排序功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
Ionic2開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細介紹了Ionic2開發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南
這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開發(fā)指南,兼容uniapp版本,需要的朋友可以參考下
2023-12-12