基於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程序設計有所幫助。
小編推薦
熱門推薦