recherche

Maison >interface Web >js tutoriel >Implémenter un exemple de code de case à cocher basé sur les compétences javascript_javascript

Implémenter un exemple de code de case à cocher basé sur les compétences javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:17:191437parcourir

L'exemple de cet article explique le code détaillé pour implémenter la case à cocher en javascript et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

Rendu :

Code spécifique : 

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

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Effet de collision de boule de mouvement moléculaire réalisé par jQuery_jqueryArticle suivant：Effet de collision de boule de mouvement moléculaire réalisé par jQuery_jquery

Articles Liés

Voir plus