Question

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

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

JSFIDDLE由于某些原因它在这里不起作用......？

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

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

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

Answer 1

您的代码无法正常工作的原因是因为它在onLoad上运行。您的DOM和onclick是在加载完成之前创建的。您可以将代码移到<head></head>代码中，它会按原样运行。请参阅here，我所做的只是选择“No wrap-in head”，没有代码更改。

您还可以继续让您的javascript运行onLoad并移除您的onclick并在javascript中添加eventlistener，如下所示：

JSFiddle

var txtBox = document.getElementById("txtBox");
document.getElementById("chkBox").addEventListener("click", function() {
    if (this.checked) {
        txtBox.style.visibility = "visible";
    } else {
        txtBox.style.visibility = "hidden";
    }
});

如果你有多个这样的实例，我会改变你的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>

并像这样做你的JQuery（因为你以前标记过jquery）：

$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.show();
    } else {
        $input.hide();
    }
});

JSFiddle

或者使用纯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];
        }
    }
}

JSFiddle

Answer 2

试试这个，

<强>的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"/>

使用复选框隐藏多个表单域

2 个答案: