Javascript 条件表单不起作用_Javascript_Html_Forms

Javascript 条件表单不起作用

javascript html forms

Javascript 条件表单不起作用,javascript,html,forms,Javascript,Html,Forms,我是javascript新手，我正在尝试向表单添加一个条件字段。我看过这些帖子： ? 到目前为止，我已经想出了这个小例子，效果很好。功能cucu（表格）{ if（form.check.checked）{ document.getElementById（“cucu”）.style.visibility=“visible”； } 否则{ document.getElementById（“cucu”）.style.visibility=“hidden”； } } 函数加载（） { docu

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

?

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


功能cucu（表格）{
if（form.check.checked）{
document.getElementById（“cucu”）.style.visibility=“visible”；
}
否则{
document.getElementById（“cucu”）.style.visibility=“hidden”；
}
}
函数加载（）
{
document.getElementById（“cucu”）.style.visibility=“hidden”；
}
库库

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

这是表格的一部分：

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>


布拉布拉
函数隐藏元素（）{
document.getElementById（“divAlbum”）.style.visibility=“hidden”；
}
功能检查相册（表格）{
if（form.checkAlbum.checked）{
document.getElementById（“divAlbum”）.style.visibility=“visible”；
}否则{
document.getElementById（“divAlbum”）.style.visibility=“hidden”；
}
}

我真的不知道问题出在哪里。我一次又一次地检查函数。对可能出现的错误有什么建议吗？谢谢

您的按钮不起作用的原因是

此

指的是单击的输入本身。输入上的

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";
    }
}

到底是什么问题？“不工作”并不是一个真正的问题描述，引用其他问题仍然让我们怀疑你是在解决同一个问题还是另一个问题。如果是相同的问题，为什么不使用相同的解决方案，

display:none

而不是设置

visibility

？php生成什么HTML？JavaScript在客户端工作，因此服务器端脚本与您的问题无关；我们需要HTML。当我选中相册复选框时，什么都没有发生，字段保持隐藏。控制台错误日志中有什么内容吗？你试过在js文件的顶部添加“use strict”来发送更多错误吗？别说了，这是Christmas！在这种情况下，三元表单不是更容易吗：

document.getElementById（'divAlbum'）.style.visibility=this.checked可见'：'隐藏'（虽然我想这完全取决于个人品味…@DavidThomas-只是复制了他的代码示例和建议的更改。查看我的更新，了解我将如何使用jQuery处理它。我从未考虑过这样做……很好！=）我在没有jQuery的情况下做了建议的更改，但没有达到预期效果。现在，@tvanfosson-我已将您的解决方案复制并粘贴到一个新文件中，效果良好。但是，如果我在我的项目中尝试同样的事情，什么也不会发生，似乎有什么东西在干扰我。那会是什么？
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";
    }
}

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