Question

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

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

Answer 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);
    });
});

条件形式不起作用

1 个答案: