条件形式不起作用答案

【问题标题】：Conditional form not working条件形式不起作用
【发布时间】：2012-12-10 23:41:11
【问题描述】：

我是 javascript 新手，我正在尝试向表单添加条件字段。我看过这些帖子：

How do you create a hidden div that doesn't create a line break or horizontal space??
conditional display of html element forms

到目前为止，我已经想出了这个小例子，效果很好。

<html>
   <head>
       <script language="javascript">

           function cucu(form){
                   if(form.check.checked){
                   document.getElementById("cucu").style.visibility="visible"; 
                   }
                   else{
                          document.getElementById("cucu").style.visibility="hidden";
                  }
          }

              function load()
              {
                      document.getElementById("cucu").style.visibility="hidden";
              }

      </script>
  </head>

  <body onload="load()">
  <form id="form">
      <input type="checkbox" name="check" onclick="cucu(this.form)" >

      <div id="cucu">
      CUCU
      </div>

      </form>
  </body>
<html>

我在更大的一侧尝试了相同的方法，唯一的变化是隐藏元素是一个文本字段，但它不起作用。

这是表格的一部分：

Album:  <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this.form)" id="idAlbum">

        <div id="divAlbum" >
        Choisir un album : <input type="text" name="Album" list="Albums">
                <datalist id="Albums">

                    <?php
                        $requete = 'SELECT DISTINCT titreAlbum FROM Album';
                        $resultat = mysqli_query($connexion, $requete);
                            while($row = mysqli_fetch_assoc($resultat)){
                                echo '<option value="'.$row['titreAlbum'].'">';
                        }
                     ?>

                </datalist> <br><br>
        </div>

我的头像如下：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />
    <title>BLABLA</title>
    <link rel="stylesheet" type="text/css" href="include/styles.css"> 
    <script language="javascript" >

    function hideElements(){
        document.getElementById("divAlbum").style.visibility="hidden";
    }

    function checkAlbum(form){
        if(form.checkAlbum.checked){
            document.getElementById("divAlbum").style.visibility="visible";
        }else{
            document.getElementById("divAlbum").style.visibility="hidden";
        }
    }

    </script>
</head>

我真的不知道问题是什么。我一次又一次地检查了这些功能。对可能的错误有什么建议吗？谢谢

【问题讨论】：

到底是什么问题？ “不工作”并不是真正的问题描述，引用其他问题仍然让我们想知道您是在解决相同的问题还是不同的问题。如果是同样的问题，为什么不使用相同的解决方案，display: none 而不是设置visibility？
该 php 生成什么 HTML？ JavaScript 在客户端工作，因此服务器端脚本与您的问题无关；我们需要 HTML。
当我选中相册复选框时，
字段保持隐藏状态。
控制台错误日志中有什么内容吗？您是否尝试在 js 文件顶部添加“use strict”以发送更多错误？
别说了，现在是圣诞节！

【解决方案1】：

您的按钮不起作用的原因是this 指的是单击的输入本身。输入上的form 属性是指form 属性的值，而不是实际的形式。实际上你不需要form 属性，你可以简单地使用this.checked 来查看当前是否检查了相应的输入。

Album:  <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this)" id="idAlbum">

function checkAlbum(cb){
    if(cb.checked){
        document.getElementById("divAlbum").style.visibility="visible";
    }else{
        document.getElementById("divAlbum").style.visibility="hidden";
    }
}

除此之外，我建议您考虑不要内联应用您的 JavaScript。将代码与标记分开可以提高可读性并有助于防止错误。您可能会考虑使用 jQuery 框架，因为它会使这类事情变得更容易。

$(function(){
    $('#idAlbum').on('change', function() { 
        // use change instead of click in case there's a label involved
        $('#divAlbum').toggle(this.checked);
    });
});

【讨论】：

在这种情况下，三元形式不是更容易吗：document.getElementById('divAlbum').style.visibility = this.checked ? 'visible' : 'hidden';（虽然我想这完全取决于个人喜好......）
@DavidThomas - 只是复制他的代码示例和建议的更改。请参阅我的更新，了解如何使用 jQuery 处理它。
我从来没有考虑过那样做...很好！ =)
我在没有 jQuery 的情况下进行了建议的更改，但没有达到预期的效果。现在<div id="divAlbum> 始终可见，即使是简单的示例也无法以这种方式工作。
@tvanfosson - 我已将您的解决方案复制并粘贴到一个新文件中，它工作正常。但是如果我在我的项目中尝试同样的事情，什么都不会发生，似乎有什么干扰。那会是什么？