基于javascript实现checkbox复选框实例代码

前端技术 2023/09/09 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24559

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案