javascript - オンクリックで Javascript を使用せずに隠しフィールドを表示する

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

あなたが引用したものから実際の HTML を想像することはできませんが、構造によっては、最新のブラウザーを使用すると、CSS の:checked疑似クラスでこれを行うことができます。

たとえば、実際の HTML が次のようになっているとします。

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

...次に、この CSS は最新のブラウザーでそれを行います。

#prevname {
    display: none;
}

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

実例| ソース

これは兄弟コンビネータを使用していますが、他にもオプションがあります。重要なことは:checked、ターゲット ブラウザでサポートされていることを確認することです。

古いブラウザーでは、次の 2 つの選択肢があります。

1. JavaScript を使用する

2. サーバーからページを更新します。

Answer 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ように、より優れたセレクターになります。

Answer 3

JavaScriptがないとDOM(アイテムの表示/非表示)を変更できません！