-1

我正在使用一个用于显示和隐藏内容的 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，任何人都可以建议我如何实现这一点？

非常感谢！

4

3 回答 3

2

我无法从您引用的内容中描绘出您的实际 HTML，但根据您的结构，使用现代浏览器，您可以使用 CSS 的:checked伪类来做到这一点。

例如，如果实际的 HTML 如下所示：

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

...然后这个 CSS 将在现代浏览器上执行此操作：

#prevname {
    display: none;
}

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

实例| 资源

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

在较旧的浏览器上，您有两种选择：

  1. 使用 JavaScript

  2. 从服务器刷新页面。

于 2013-09-27T21:10:22.220 回答
2

这实际上可以通过 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/

编辑：正如 TJ Crowder 指出的那样，#previousName:checked ~ #prevname这将是一个更好的选择器。

于 2013-09-27T21:09:24.137 回答
0

没有 JavaScript 就无法修改 DOM（显示/隐藏项目）！

于 2013-09-27T21:07:16.460 回答