使用html屬性設置javascript變量

Question

我正在嘗試重新創建https://chriscoyier.net/的功能，在該功能中您具有帶有單選按鈕的表單，並且在單擊單選按鈕時，文本會更改。

我開始的是：

 window.onload=function() { document.getElementById("hidden_elements").style.display="none"; // attach the click event handler to the radio buttons var radios = document.forms[0].elements["group1"]; for (var i = [0]; i < radios.length; i++) radios[i].onclick=radioClicked; } function radioClicked() { if (this.value == "two") { document.getElementById("hidden_elements").style.display="block"; } else { document.getElementById("hidden_elements").style.display="none"; } } 

 <form id="picker" method="post" action=""> Item 1: <input type="radio" name="group1" value="one" /> Item 2: <input type="radio" name="group1" value="two" /> Item 3: <input type="radio" name="group1" value="three" /><br /> <br /> <div id="hidden_elements"> Input 1: <input type="text" id="intext" /> Input 2: <input type="text" id="intext2" /> Input 3: <input type="text" id="intext3" /><br /><br /> </div> <input type="submit" id="submitbutton" value="Send form" /> </form> 

如果選擇了輸入數字2，這使我可以使用id =“ hidden_​​elements”隱藏或顯示div。

我要做的是根據輸入1、2或3隱藏或顯示“ hidden_​​elements”的各個元素。

我嘗試將“ hidden_​​elements”屬性更改為：

<div id="hidden_elements">
Input 1: <input type="text" name="one" />
Input 2: <input type="text" name="two"  />
Input 3: <input type="text" name="three"  /><br /><br />
</div>

和JS可以：

var hide = document.getElementById("hidden_elements");
        for (var i = [0]; i < hide.length; i++)
            hide[i].style.display = "none";

function radioClicked() {
        document.getElementsByName(this.value).style.display = "block"
    }

但這也不起作用。

我已經嘗試過使用if / else語句的一種不太吸引人的方法，但是那也不起作用。

<div id="paragraphs">
    <div id="hidden_element" name="one">Paragraph 1 </div>
    <div id="hidden_element" name="two">Paragraph 2 </div>
    <div id="hidden_element" name="three">Paragraph 3 </div>
</div>

function radioClicked() {
        if (this.value == "one") {
            document.getElementById("hidden_element_one").style.display="block";
        } else if (this.value == "two") {
            document.getElementById("hidden_element_two").style.display="block";
        } else if (this.value == "three") {
            document.getElementById("hidden_element_three").style.display="block";
        }
    }

我嘗試了更多的方法，但是行為不是我想要的。 知道如何根據所選的單選按鈕將顯示從“無”更改為“阻止”嗎？ （我知道您可以使用JQuery做到這一點，但我正在嘗試學習Javascript）

Answer 1

一些注意事項：

1. getElementsByName 返回元素列表 。 該列表沒有style屬性（列表中的條目具有）。

2. id 必須是唯一的，您不能將相同的ID放在多個元素上。 使用類將元素分組在一起。

3. data-*屬性可能比name更好，因為您可以在任何元素類型上使用它們。

4. 如果要基於單選按鈕值顯示/隱藏元素，則需要選擇所有顯示/隱藏的元素，而不僅僅是與單選按鈕值匹配的元素。 然后遍歷該列表，根據它們是否與所選值匹配來顯示/隱藏。

5. 該load事件發生在頁面加載周期（例如，右末） 很晚 。 除了使用load ，還可以將script標記放在文檔的最后，緊靠</body>標記之前，並立即進行事件連接。

6. 我可能會使用一個類來切換可見性，而不是style.display 。

7. 您可以通過getAttribute從元素獲取屬性。

8. 您可以使用querySelectorAll獲取與任何CSS選擇器匹配的元素列表。 在document上使用它可以全局查看， 在特定元素上可以僅在該元素內查看。 例如，要獲得文檔中具有名為data-val的屬性的元素列表，可以使用CSS選擇器[data-val] ，例如`document.querySelectorAll（“ [data-val]”）。

這是您的代碼段的版本，其中包含一些最少的更新； 看評論：

 // I'd use querySelectorAll rather than the old-style // forms and elements collections (but those work too) var radios = document.querySelectorAll("#picker input[type=radio]"); // Initial value is 0, not [0] for (var i = 0; i < radios.length; i++) { // You were missing { on this line // Recommend modern event handling, not onclick radios[i].addEventListener("click", radioClicked); } function radioClicked() { var hidden = document.getElementById("hidden_elements"); hidden.classList.remove("hidden"); // Get all elements within it that have a data-val attribute var list = hidden.querySelectorAll("[data-val]"); for (var i = 0; i < list.length; ++i) { var el = list[i]; // Add/remove the hidden class depending on whether it matches el.classList.toggle("hidden", el.getAttribute("data-val") != this.value); } } 

 .hidden { display: none; } 

 <form id="picker" method="post" action=""> Item 1: <input type="radio" name="group1" value="one" /> Item 2: <input type="radio" name="group1" value="two" /> Item 3: <input type="radio" name="group1" value="three" /><br /> <br /> <!-- Hide this initially with markup rather than code --> <div id="hidden_elements" class="hidden"> <!-- Use data-val to identify them --> Input 1: <input type="text" data-val="one" /> Input 2: <input type="text" data-val="two" /> Input 3: <input type="text" data-val="three" /><br /><br /> </div> <input type="submit" id="submitbutton" value="Send form" /> </form> 

您可能需要進行一些進一步的更改：

• 將所有代碼包裝在IIFE中，所以沒有什么是全局的。
• 將輸入及其標簽包裝在label元素中，並切換它們（而不是直接輸入）的可見性。
• 將內容包裝在容器中以換行，而不要使用br 。

Answer 2

您可以這樣做：

1. 在要切換的元素上添加一個通用類（可以在范圍內包裝標簽和字段）

2. 切換其顯示，可以使用CSS類進行隱藏，並使用與復選框的值相同的類

 function radioClicked(e) { //hide previously shown var elem = document.getElementById("hidden_elements").getElementsByClassName("shown")[0]; if (elem) { elem.classList.remove("shown"); elem.classList.add("hide"); } //show currently selected elem = document.getElementById("hidden_elements").getElementsByClassName(e.value)[0]; elem.classList.remove("hide"); elem.classList.add("shown"); } 

 .hide { display: none; } 

 <form id="picker" method="post" action=""> Item 1: <input type="radio" name="group1" value="one" onclick="radioClicked(this)" /> Item 2: <input type="radio" name="group1" value="two" onclick="radioClicked(this)" /> Item 3: <input type="radio" name="group1" value="three" onclick="radioClicked(this)" /><br /> <br /> <div id="hidden_elements"> <span class="hide one elem">Input 1: <input type="text" id="intext" /></span> <span class="hide two elem">Input 2: <input type="text" id="intext2" /></span> <span class="hide three elem">Input 3: <input type="text" id="intext3" /></span> </div> <input type="submit" id="submitbutton" value="Send form" /> </form> 

Answer 3

我的解決方案將單選按鈕的值更改為數字值，而不是文本值。 這使它可用於通過id選擇輸入元素並附加數字。

每次運行radioClicked() ，它都會隱藏所有輸入，僅顯示選定的輸入。 為此，我將所有輸入及其標簽包裝在span元素中。

 window.onload=function() { // attach the click event handler to the radio buttons var radios = document.forms[0].elements["group1"]; for (var i = [0]; i < radios.length; i++) radios[i].onclick=radioClicked; } function radioClicked() { var allRadio = document.querySelectorAll('#hidden_elements span'); Array.prototype.forEach.call(allRadio, function(el, i){ el.style.display="none"; }); var selectedRadio = this.value; document.getElementById("intext" + selectedRadio).parentNode.style.display="block"; } 

 #hidden_elements span { display: none; } 

 <form id="picker" method="post" action=""> Item 1: <input type="radio" name="group1" value="1" /> Item 2: <input type="radio" name="group1" value="2" /> Item 3: <input type="radio" name="group1" value="3" /><br /> <br /> <div id="hidden_elements"> <span>Input 1: <input type="text" id="intext1" /></span> <span>Input 2: <input type="text" id="intext2" /></span> <span>Input 3: <input type="text" id="intext3" /></span><br /><br /> </div> <input type="submit" id="submitbutton" value="Send form" /> </form> 

Answer 4

我的解決方案為所有輸入添加額外的div並為此div添加id

 window.onload = function() { var hide = document.getElementsByClassName("hidden"); for (var i = [0]; i < hide.length; i++) hide[i].style.display = "none"; // attach the click event handler to the radio buttons var radios = document.forms[0].elements["group1"]; for (var i = [0]; i < radios.length; i++) radios[i].onclick = radioClicked; } function radioClicked() { var hide = document.getElementsByClassName("hidden"); for (var i = [0]; i < hide.length; i++) hide[i].style.display = "none"; document.getElementById("hidden_" + this.value).style.display = "block" } 

 <form id="picker" method="post" action=""> Item 1: <input type="radio" name="group1" value="one" /> Item 2: <input type="radio" name="group1" value="two" /> Item 3: <input type="radio" name="group1" value="three" /><br /> <br /> <div id="hidden_elements"> <div class="hidden" id="hidden_one">Input 1: <input type="text" /></div> <div class="hidden" id="hidden_two">Input 2: <input type="text" /></div> <div class="hidden" id="hidden_three">Input 3: <input type="text" /><br /><br /></div> </div> <input type="submit" id="submitbutton" value="Send form" />