HTML 元素 display:initial 或 display:none 根据复选框状态更改

Question

我用

和元素创建了一个小设置，我想根据指定复选框的状态显示或隐藏这些元素。选中复选框时，应设置 display:intial，未选中复选框时，应设置 display:none。但是，我一直在尝试找出如何使用 JS 执行此操作，但我一无所获。我的代码示例：

<p id="nr_1" style="display: initial">Number 1 Example text here </p>
<input type="checkbox" id="nr_1" checked> Number 1</input>
<p style="display: initial" id="nr_1">
    <img src="src_nr_1.png">
</p>

我设法从我能找到的内容中拼凑而成的 JS 如下所示：

function handleClick($id) {
    if (document.getElementById($id).display == checked) {
        var element = document.getElementById($id);
        element.style = "display:initial";
    }
    else {
        var element = document.getElementById($id);
        element.style = "display:initial";
    }
}

但是，我什至无法成功地让复选框执行任何操作。我试过 If/Else 只是弹出一个带有文本的警报，看看我是否能够在选中和取消选中复选框时发生任何事情。从我一直在构建的结构中可能非常明显，但我以前从未使用过 JS。我想它必须用 onClick() 或 onCheck() 做点什么，但它们似乎都没有任何反应。

所以我在这里要做的是让 JS 对 checking/unchecking 复选框做出反应。我想让它尽可能通用，因为在 10-25 个复选框之间会有某个地方，并且必须为每个不同的 HTML 元素对其进行硬编码并不是最理想的情况。复选框、文本元素和图像都有相同的 ID 来匹配它们。因此，如果复选框 1 被选中，文本元素 1 和图像 1 将出现。如果未选中，它们都会消失。任何能给我指出正确方向的东西都将不胜感激。

Answer 1

如果您使用 JQuery 进行此操作，则可以使用以下代码完成

$(document).ready(function(){
    $("#chkboxId").click(function(){
        if($("#"+this.id).is(":checked")){
        $("#newelementid").show();
        }else
        $("newelementid").hide();
    });
});

Answer 2

示例：http://jsfiddle.net/kevalbhatt18/Lapekkv1/

HTML:



<input type="checkbox" id="nr_1" checked onchange="handleClick(this)"> Number 1</input>
<p style="display: initial" id="imageId">
    <img src="src_nr_1.png">
</p>

JavaScript:

<script> function handleClick(cb) { if( cb.checked){ console.log(cb.checked); document.getElementById("imageId").style.display = "initial"; }else{ console.log( cb.checked); document.getElementById("imageId").style.display = "none"; } } </script>

Answer 3

有些错误... 1）你不能在一个页面中使用 id 两次。 JS 会感到困惑 :) 2) 我对 getElementById($id).display == checked 表示怀疑，因为 checked 和 unchecked 是属性 'checked'

的值

以下代码将起作用：

<p class="nr_1" style="display:initial"> Number 1 Example text here </p>
<input type="checkbox" title="nr_1" name="abccheck" checked onChange="callMe(this)"> Number 1</input> 
<p style="display:initial" class="nr_1"> <img src="src_nr_1.png"> </p>

和JavaScript：

function callMe(x)
{   
    var changeableTags=document.getElementsByClassName(x.getAttribute("title"));
    if(x.checked == true)
    {
        for(i=0; i<changeableTags.length; i++)
        {
        changeableTags[i].style.display="initial";
        }
    }
    else{
        for(i=0; i<changeableTags.length; i++)
        {
        changeableTags[i].style.display="none";
        }
    }
}

这里：

我们在复选框的状态更改时调用了函数 'callMe'，并通过 'this' 将 object（复选框）传递给它。
现在我们在 javascript 中的变量 'x' 中取 'that' object 并将其标题与 p 元素上的 class 属性进行比较（因为我们需要隐藏和显示多个，所以不能使用 id)
现在通过比较，我们将所有带有 class 名称（这里是 'nr_1'）的复选框标题的标签...在我们的例子中是 'nr_1'，在一个变量中表示数组 'changeableTags'
现在如果检查'x' object的状态，我们需要将其样式更改为display:initial else display:none.
所以我们使用 for 循环直到我们的数组长度 'changeableTags'
和运行它并根据需要更改其每个 object 的样式。

Answer 4

对不同的元素使用相同的 id 不是你能做的。相反，使用 class 或 data-* 属性将它们 link 在一起。

（更）可读的代码，它可以做你想做的事（代码假设所有应该 shown/hidden 基于复选框选中状态的元素在它们的 classes 中有一个 class 与它们所依赖的复选框的 id 同名。注意: 不要给复选框本身一个 class 与其 id 同名，否则它也会消失，除非你在某个地方编写脚本，否则它不会再出现):

<!DOCTYPE html>
<html>
<head>
    <style>
        .display-initial { display: initial; }
        .display-none { display: none; }
    </style>
</head>
<body>
    <p>
        <p class="nr_1"> Number 1 Example text here </p>
        <input type="checkbox" id="nr_1"/><label for="nr_1">Number 1</label>
        <p class="nr_1"><img src="src_nr_1.png"></p>
    </p>
    <p>
        <p class="nr_2"> Number 2 Example text here </p>
        <input type="checkbox" id="nr_2" checked/><label for="nr_2">Number 2</label>
        <p class="nr_2"><img src="src_nr_2.png"></p>
    </p>
    <p>
        <p class="nr_3"> Number 3 Example text here </p>
        <input type="checkbox" id="nr_3" /><label for="nr_3">Number 3</label>
        <p class="nr_3"><img src="src_nr_3.png"></p>
    </p>
    <script>
        var checkboxes = [].filter.call(document.getElementsByTagName('input'), function(element) { return element.type == "checkbox"; });
        checkboxes.forEach(function (checkbox) {
            function refreshDependentElements() {
                [].forEach.call(document.getElementsByClassName(checkbox.id), function(dependentElement) {
                    if (checkbox.checked) {
                        dependentElement.classList.add('display-initial');
                        dependentElement.classList.remove('display-none');
                    } else {
                        dependentElement.classList.add('display-none');
                        dependentElement.classList.remove('display-initial');
                    }
                })
            }
            checkbox.onclick = refreshDependentElements;
            refreshDependentElements();
        });
    </script>
</body>
</html>

代码的问题在于，在这种状态下，它依赖于 Element.classList, Array.prototype.forEach and Array.prototype.filter，并非每个浏览器都支持它（最值得注意的是，IE9 及以下）。您可以包含 polyfill（在 linked MDN 页面中给出），或者这里有一个不依赖于它们的版本（只是 <script> 和 </script> 标签之间的代码来自以上）：

        function addClassToElement(element, className) {
            var currentClasses = element.className.split(' ');
            for (var iClass = 0; iClass < currentClasses.length; iClass++) {
                if (currentClasses[iClass] === className) return;
            }
            currentClasses.push(className);
            element.className = currentClasses.join(' ');
        }

        function removeClassFromElement(element, className) {
            var currentClasses = element.className.split(' ');
            var newClasses = [];
            for (var iClass = 0; iClass < currentClasses.length; iClass++) {
                if (currentClasses[iClass] !== className) newClasses.push(currentClasses[iClass]);
            }
            element.className = newClasses.join(' ');
        }

        var inputs = document.getElementsByTagName('input');
        for (var iInput = 0; iInput < inputs.length; iInput++) {
            if (inputs[iInput].type !== 'checkbox') continue;
            (function (checkbox) {
                checkbox.onclick = function () {
                    var dependentElements = document.getElementsByClassName(checkbox.id);
                    for (var iElement = 0; iElement < dependentElements.length; iElement++) {
                        if (checkbox.checked) {
                            addClassToElement(dependentElements[iElement], 'display-initial');
                            removeClassFromElement(dependentElements[iElement], 'display-none');
                        } else {
                            addClassToElement(dependentElements[iElement], 'display-none');
                            removeClassFromElement(dependentElements[iElement], 'display-initial');
                        }
                    }
                }
                checkbox.onclick();
            })(inputs[iInput]);
        }

此代码适用于所有主流浏览器（IE5.5+，所以没问题）。

HTML 元素 display:initial 或 display:none 根据复选框状态更改

HTML Elements display:initial or display:none changing upon checkbox state

html

javascript

checkbox