javascript - 选中复选框时如何更改文本显示

Question

我正在制作一个包含复选框和输入文本的表单。当一个复选框被选中时，相关文本应该出现在它旁边。这是我当前的代码，但它不起作用: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";
    }
}

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