2

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

如何创建一个不创建换行符或水平空间的隐藏 div？?
html元素表单的条件显示

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

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

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

4

1 回答 1

3

您的按钮不起作用的原因是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);
    });
});
于 2012-12-24T15:52:51.670 回答