Question

我正在使用Javascript函数来显示和隐藏内容。

function hiddenfield() {
    document.getElementById('previousName').addEventListener('change', function () {
        if (document.getElementById('previousName').checked) {
            document.getElementById('prevname').style.display = 'block';
        } else {
            document.getElementById('prevname').style.display = 'none';
        }
    }, false);
}

在视图中，

@Html.CheckBoxFor(m => m.IsPreviousName, new { id = "previousName", onclick = "if(this.checked){hiddenfield()}" }) <label for="previousName">Select if you have previous name</label>

<div style="display:none;" id="prevname">
<label for="pfname">Previous Name</label>
@Html.TextBoxFor(m => m.PreviousFName, new { id = "pfname" })
</div>

所以我的问题是如果JS启用它可以正常工作，但我需要让它在没有JS的情况下工作。那么，任何人都可以建议我如果在浏览器中禁用Javascript，我该如何实现这一目标？

非常感谢！

Answer 1

这实际上可以使用CSS3。假设有以下标记：

<input type="checkbox" id="previousName"><label for="previousName">Select if you have previous name</label>
<div style="display:none;" id="prevname">
    <label for="pfname">Previous Name</label>
    <input>
</div>

这适用于支持它使用的所有魔法的浏览器（属性选择器，:checked伪类和一般兄弟选择器~）：

input[type=checkbox]:checked ~ #prevname { 
    display: block !important; 
}

http://jsfiddle.net/4y3HT/

编辑：正如T.J.克劳德指出，#previousName:checked ~ #prevname将是一个更好的选择者。

Answer 2

我无法根据您的引用来描绘您的实际HTML，但根据您的结构，使用现代浏览器，您可以使用CSS的:checked伪类来完成此操作。

例如，如果实际HTML看起来像这样：

<input type="checkbox" id="previousName">
<div id="prevname">...</div>

...然后这个CSS将在现代浏览器上实现：

#prevname {
    display: none;
}

#previousName:checked ~ #prevname {
    display: block;
}

Live Example | Source

那是使用兄弟组合器，但还有其他选择。关键是要确保目标浏览器支持:checked。

在旧版浏览器中，您有两种选择：

使用JavaScript
从服务器刷新页面。

Answer 3

如果没有JavaScript，您无法修改DOM（显示/隐藏项目）！

Onclick显示没有Javascript的隐藏字段

3 个答案: