はどのように隠し/フォーム

Question

持つへの選択からの値のラベルがvisble：

<label for="option">Option: 
    <select name="option" required> 
    <option value="Yes">Yes</option> 
    <option value="No" selected>No</option> 
    </select> 
</label> 

<label for="mytext">Text: 
    <input name="mytext" type="text"> 
</label> 

を解く方法：（NO、その後MYTEXTを非表示にする必要はありませんしOPTIONで

• ラベルが付属します）;

• OPTIONとすると、MYTEXTはVISIBLE（ラベル付き）にする必要があります。

ページの読み込みでは、MYTEXTはHIDDEN（ラベルが含まれている）である必要があります。

ありがとうございました。

Answer 1

だけ使用イベントリスナー：

document.addEventListener('DOMContentLoaded', function() { // runs after all elements are loaded 
 

 
    // element selectors: 
 
    var mytextLabel = document.querySelector('label[for=mytext]'); 
 
    var option = document.querySelector('select[name=option]'); 
 
    var mytextInput = mytextLabel.querySelector('input'); 
 

 
    mytextLabel.classList.add('hidden'); // hides 'mytext' after page load 
 

 
    option.addEventListener('change', function(event) { // runs after option is selected 
 
    // the actual logic is pretty straightforward: 
 
    if (event.target.value === 'Yes') { 
 
     mytextLabel.classList.remove('hidden'); // shows the label with input inside 
 
     mytextInput.required = true; // marks the input as required 
 
    } else { 
 
     mytextLabel.classList.add('hidden'); // hides the label with input inside 
 
     mytextInput.required = false; // marks the input as optional 
 
    } 
 
    }); 
 
});

.hidden {display: none;}

<form onsubmit="alert('sent'); return false;"> 
 
<label for="option">Option: 
 
    <select name="option" required> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No" selected>No</option> 
 
    </select> 
 
</label> 
 

 
<label for="mytext">Text: 
 
    <input name="mytext" type="text" /> 
 
</label> 
 
<button type="submit">Send</button> 
 
</form>

その後、 select上 changeイベントハンドラを経由して、あなたは .classListオブジェクトの .toggle()メソッドと、そのクラスの使用を切り替えます

EDIT：required属性の追加スイッチング

EDIT：@ScottMarcusにより示唆されるようにです

Answer 2

CSSクラスを設定するだけで、要素を非表示にするように設定し、最初から非表示にする場合は、そのクラスをデフォルトで要素に適用します。

var input = document.querySelector("[name='mytext']"); 
 
document.querySelector("select[name='option']").addEventListener("change", function(){ 
 
    input.classList.toggle("hidden"); 
 
});

.hidden { display:none; } /* This is appled to the input by default and toggled as needed */

<label for="option">Option: 
 
    <select name="option" required> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No" selected>No</option> 
 
    </select> 
 
</label> 
 

 
<label for="mytext">Text: 
 
    <input name="mytext" type="text" class="hidden"> 
 
</label>