选中复选框时如何更改文本显示答案

【问题标题】：How to change text display when checkbox checked选中复选框时如何更改文本显示
【发布时间】：2019-12-09 16:13:50
【问题描述】：

我正在制作一个包含复选框和输入文本的表单。当一个复选框被选中时，相关的文本应该出现在它旁边。这是我当前的代码，但它不起作用： HTML：

<input type="checkbox" class="box1" onchange="showHide()"> Option 1
<div class="hid box1">
    <select name="option1">
        <option value="yes">Yes</option>
        <option value="no">No</option>
     </select>
    Comments: <input type="text" name="option1Comment">
</div>

CSS：

.hid {
    display: none;
}

JavaScript：

function showHide() {
    var checkBox = document.getElementByClassName(this);
    var text = document.getElementByClassName(this "hid");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
        text.style.display = "none";
    }
}

【问题讨论】：

没有getElementByClassName
选择使用querySelectors 使事情更容易阅读和理解
请务必先检查浏览器控制台是否有错误。没有getElementByClassName，函数名为getElementsByClassName。因此，您还需要获取返回列表的第一个元素：var checkBox = document.getElementsByClassName("box1")[0];
还有需要改进的地方（不相关）：检查复选框是否被选中的 if 语句不需要 == true 并且您可以编写内联 if 事实上。
我想尽量避免使用索引，这就是为什么我选择了 2 个不同的类。 “隐藏”类应用于任何我想保持隐藏直到被选中的 div，然后第二个类将 div 与同一类的复选框配对。

标签： javascript html css forms checkbox

【解决方案1】：

您应该在代码中修复一些问题。

首先，您可以将<input> 上的函数调用从 onchange="showHide()" 到 onchange="showHide(this)"

然后，您可以在您的函数上修复getElementByClassName 的语法，或者将其更改为querySelector 以获得您想要的Node。

之后你可以做这样的事情来隐藏或显示你的<div>：

function showHide(element) {
    let checkboxClass = element.classList[0];
    let div = document.querySelector("div.hid." + checkboxClass);
    div.style.display = (element.checked) ? "block" : "none";
}

【讨论】：

出于个人好奇心，为什么不使用querySelectors 让事情变得更简单？
@RohanBhangui 我只是尝试遵循 OP 正在做的事情。就个人而言，在这种情况下，它应该使用querySelector("div.hid")，这样更易于阅读和理解。我可能会用它来编辑答案:)
什么是querySelector？
@rkafds 想到 css 选择器样式，但对于 js：developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
我添加了@RohanBhangui 所说的内容，并带有指向 MDN 网站的链接。