Heim > Artikel > Web-Frontend > Implementieren Sie den Checkbox-Checkbox-Beispielcode basierend auf Javascript_Javascript-Kenntnissen

Implementieren Sie den Checkbox-Checkbox-Beispielcode basierend auf Javascript_Javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:17:191395Durchsuche

Das Beispiel in diesem Artikel erklärt den detaillierten Code für die Implementierung des Kontrollkästchens in Javascript und stellt ihn Ihnen als Referenz zur Verfügung. Der spezifische Inhalt ist wie folgt

Rendering:

Spezifischer Code:

<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>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Molekularer Bewegungsball-Kollisionseffekt, realisiert durch jQuery_jqueryNächster Artikel：Molekularer Bewegungsball-Kollisionseffekt, realisiert durch jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen