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

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

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

本文實例講解了javascript實現(xiàn)checkbox復選框的詳細代碼，分享給大家供大家參考，具體內(nèi)容如下

效果圖：

具體代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</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="文學" />文學
  <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>

希望本文所述對大家學習javascript程序設(shè)計有所幫助。

您可能感興趣的文章: