HTML 元素 display:initial 或 display:none 在复选框状态时更改答案

【问题标题】：HTML Elements display:initial or display:none changing upon checkbox stateHTML 元素 display:initial 或 display:none 在复选框状态时更改
【发布时间】：2015-05-29 10:22:02
【问题描述】：

我用

创建了一个小设置

和元素，我希望根据其指定复选框的状态显示或隐藏它们。选中复选框时，应设置 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 在选中/取消选中复选框时做出反应。我想让它尽可能通用，因为会有 10 到 25 个复选框之间的某个地方，并且必须为每个不同的 HTML 元素硬编码并不是最理想的情况。复选框、文本元素和图像都具有相同的 ID 以匹配它们。因此，如果复选框 1 被选中，文本元素 1 和图像 1 将出现。如果它没有被选中，它们都会消失。任何能指出我正确方向的东西都将不胜感激。

【问题讨论】：

您有两个具有相同 id 的元素：这是无效的，并且会使用 id-selector 破坏任何 JavaScript。
其实还有three element with same id

标签： javascript html checkbox

【解决方案1】：

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

执行您想要的（更）可读代码（该代码假定所有应根据复选框选中状态显示/隐藏的元素在其类中具有与复选框的 id 同名的类注意：不要给复选框本身一个与其 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 和Array.prototype.filter，并非所有浏览器都支持它们（尤其是IE9 及以下版本）。您可以包含 polyfills（在链接的 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+，所以没问题）。

【讨论】：

【解决方案2】：

有一些错误... 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”将对象（复选框）传递给它。
现在我们将 'that' 对象放在 javascript 中的变量 'x' 中，并将其标题与 p 元素上的类属性进行比较（因为我们需要隐藏和显示多个，所以不能使用 id）
现在通过比较，我们获取了复选框标题的类名（此处为“nr_1”）的所有标签......在我们的例子中，它的“nr_1”，在单个变量中表示数组“changeableTags”
现在如果检查了“x”对象的状态，我们需要将其样式更改为 display:initial else display:none。
所以我们使用了一个 for 循环，直到我们的数组长度为 'changeableTags'
然后运行它并根据需要更改每个对象的样式。

【讨论】：

像魅力一样工作。也感谢您的逐步解释。这正是我刚开始时的想法。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

示例：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>

【讨论】：