Javascript 使用复选框隐藏多个表单字段

我需要编辑此代码，以便在多个chkBox和txtBox上使用它。
目前我只能用一个复选框隐藏一个输入字段。
我知道HTML和CSS，但不熟悉JS。
我希望能够在每个ID的末尾添加一个数字。
chkBox1，chkBox2，chkBox3。。。txtBox1、txtBox2、txtBox3…

是否需要将getElementById更改为getElementsByTagName（）？

由于某种原因，它在这里不起作用

这是我的当前代码，除非选中复选框，否则将隐藏文本字段

function showHide(){
                var chkBox = document.getElementById("chkBox");
                var txtBox = document.getElementById("txtBox");

                if (chkBox.checked){
                    txtBox.style.visibility = "visible";
                } else {
                    txtBox.style.visibility = "hidden";
                }
            }

试试这个

Javascript

$(document).ready(function(){
    $("input[type=checkbox]").change(function(){

        var oTxt = $("#txtBox" + $(this).attr("id").replace("chkBox", ""));

        if($(this).is("checked"))
            oTxt.show()
        else
            oTxt.hide();
    });
});

HTML

<input type="checkbox" id="chkBox1"/>
<input type="textbox" id="txtBox1"/>

<input type="checkbox" id="chkBox2"/>
<input type="textbox" id="txtBox2"/>

---

您的代码无法工作的原因是它在加载时运行。您的DOM和

onclick

是在加载完成之前创建的。您只需将代码移动到

标记中，它就会按原样工作。看，我所做的只是选择了“无包装头部”，没有代码更改

---

您还可以继续让javascript运行

onLoad

，删除

onclick

，并在javascript中添加一个eventlistener，如下所示：

<form>
    <div class="option">
        <input type="text" name="txtBox1" class="hiddenInput" />
        <br/>
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />
        <label for="chkBox1">Click me to show the text box</label>
    </div>
    <div class="option">
        <input type="text" name="txtBox2" class="hiddenInput" />
        <br/>
        <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />
        <label for="chkBox2">Click me to show the text box</label>
    </div>
</form>

---

如果您有多个这样的实例，我会对您的DOM进行如下更改：

<form>
    <div class="option">
        <input type="text" name="txtBox1" class="hiddenInput" />
        <br/>
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />
        <label for="chkBox1">Click me to show the text box</label>
    </div>
    <div class="option">
        <input type="text" name="txtBox2" class="hiddenInput" />
        <br/>
        <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />
        <label for="chkBox2">Click me to show the text box</label>
    </div>
</form>

---

或者使用纯javascript和类似的DOM，如上所述：

var checkBoxes = document.getElementsByClassName("showHideCheck");
for (var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].addEventListener('click', function () {
        var txtBox = getAssociatedTextBox(this);
        if (this.checked) {
            txtBox.style.visibility = "visible";
        } else {
            txtBox.style.visibility = "hidden";
        }
    }, false);
}

function getAssociatedTextBox(ele) {
    var childNodes = ele.parentNode.childNodes;
    for (i = 0, j = childNodes.length; i < j; i++) {
        if (childNodes[i].className == "hiddenInput") {
            return childNodes[i];
        }
    }
}

var复选框=document.getElementsByClassName（“showHideCheck”）；
对于（变量i=0；i

---

在本次更新中，请看一看，如果您将代码放在头部而不是加载，那么它将起作用。没有代码更改。你真的在使用jquery吗？如果您在这个项目中没有使用jquery，那么请从问题中删除标记。OP的代码可以工作。另外，当jQuery可以用一些简单的普通JavaScript实现时，为什么还要麻烦jQuery呢？那么为什么人们要使用jQuery呢？所有这些工作也可以通过javascript完成。是的，功能并不复杂，但使用这样的框架是一种很好的做法，易于理解和实现。解决方案看起来非常清晰。大多数人使用jQuery处理更复杂的任务，并不是因为它看起来很漂亮。我尽量避免ID的串联。我宁愿将复选框/文本框包装在一个div或其他东西中，并使用邻近性。。。或者，如果内容可能位于随机位置，则使用数据字段。@j08691如果@AlenSubasic没有提到

jQuery

tag，则我不会使用jQuery。我已将代码移动到标记中，我如何编辑我必须在单独的和字段上工作的JS@smerny@AlenSubasic，您之前已经标记了JQuery。使用JQuery做这种事情会更干净。有货吗？另外，您是否能够更改DOM？@AlenSubasic，已更新以显示我将如何使用jquery。

var checkBoxes = document.getElementsByClassName("showHideCheck");
for (var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].addEventListener('click', function () {
        var txtBox = getAssociatedTextBox(this);
        if (this.checked) {
            txtBox.style.visibility = "visible";
        } else {
            txtBox.style.visibility = "hidden";
        }
    }, false);
}

function getAssociatedTextBox(ele) {
    var childNodes = ele.parentNode.childNodes;
    for (i = 0, j = childNodes.length; i < j; i++) {
        if (childNodes[i].className == "hiddenInput") {
            return childNodes[i];
        }
    }
}