尝试使用 JavaScript(无 jQuery)，在选中复选框时在 html 中显示 div(2 个类)

Question

基本上我有一个表单，它有 2 种不同的扩展，具体取决于是选择单日旅行还是多日旅行(尚未编码，一旦我开始工作，我就可以正确整理(。我看过很多类似的问题，但不幸的是，其中许多都使用jQuery。

我已经为它工作了 2 天，谷歌搜索，查看了这里，并在我的导师的建议下走到了这一步，但它还没有完全到位，我没有足够的理解来修复它。我希望这是一件简单的事情，而我现在有点太缺乏经验了，无法认识到它。

现在，我只是想让一个带有 2 个不同类的 div 显示，具体取决于单击哪个类。硬编码到函数中的类目前并不重要。最终，我希望在单击提交按钮时显示div(仍然取决于所选的复选框(，但这可能是未来的努力(假设它只是一些 if/else 语句。

如果有人可以提供帮助，甚至只是为我指出正确的方向(请记住，我大约在 3 周前开始学习这个，在过去的 2 周中甚至没有使用它(，我将非常感谢您的帮助。

我附上了当前代码的JSFiddle，以及Photoshop最终结果的图片。(水平白线以下的所有内容最初都将隐藏，直到选中复选框(。

https://i.stack.imgur.com/zJXxG.jpg

Answer 1

首先，在框架和扩展下，将选择框设置为"无换行 - 在正文中"而不是"onLoad"。(在左上角(。

其次，您有多个语法错误。

Multi day<input type="checkbox" name="multi-day"         value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">

删除 ShowExtraForm1 周围的一组 "。

document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";

在"style"属性之前添加一个 . ，它目前是一个语法错误。

而且，您要隐藏的实际形式在哪里？

Answer 2

I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1() 
    {
        var singlechecksts;
        var multichecksts;
        singlechecksts= document.getElementById('singlecheck');
        multichecksts= document.getElementById('multicheck');
        if(singlechecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="none";
        }
        if(multichecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="block";
        }
    }
where singlecheck and multicheck are id's of your checkboxs