DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於javascript實現checkbox復選框實例代碼
基於javascript實現checkbox復選框實例代碼
編輯:關於JavaScript     

本文實例講解了javascript實現checkbox復選框的詳細代碼,分享給大家供大家參考,具體內容如下

效果圖:

具體代碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript">
function select_all(obj)
{
  //取得由所有hobby構成的一個數組對象
  //如果表單中,存在多個同名的name,將產生一個數組
  var arr = document.form1.hobby;
  if(obj.checked)
  {
    //為true執行代碼
    for(var i=0;i<arr.length;i++)
    {
      arr[i].checked = true;
    }
  }else
  {
    //為false執行代碼
    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="經濟" />經濟
  <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="旅游" />旅游
  <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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved