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

Hiding multiple form fields using checkboxes

本文关键字：表单 字段 隐藏 复选框      更新时间：2023-09-26

我有这个代码，我需要编辑，所以我可以在多个chkBox的和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";
                }
            }

你的代码不工作的原因是因为它正在运行onLoad。DOM和onclick是在加载完成之前创建的。您可以将代码移动到<head></head>标记中，它将按原样工作。看这里，我所做的就是选择"No wrap - in head"，没有代码更改。

你也可以继续让你的javascript运行onLoad和删除你的onclick，并在javascript中添加一个事件监听器，像这样:

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

试试这个，

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();
    });
});

相关文章：