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 to：

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

一些注意事项：

getElementsByName returns a list of elements。该列表没有style属性（列表中的条目有）。
id 必须是唯一的，您不能在多个元素上添加相同的ID。使用类将元素组合在一起。
data-* attributes可能是比name更好的选择，因为您可以在任何元素类型上使用它们。
如果您想根据单选按钮值显示/隐藏元素，您需要选择显示/隐藏的所有元素，而不仅仅是选择与单选按钮匹配的元素。值。然后遍历该列表，显示/隐藏它们是否与所选值匹配。
load事件在页面加载周期的后期发生非常（例如，在结尾处）。不要使用load，而是将script标记放在文档的最末端，就在结束</body>标记之前，并立即执行事件连接。
< / LI>
我可能会使用课程来切换可见性而不是style.display。
您可以通过getAttribute从元素中获取属性。
您可以使用querySelectorAll获取与任何CSS选择器匹配的元素列表。 Use it on document全局查看，或on a specific element仅查看该元素。例如，要使用名为data-val的属性获取文档中的元素列表，您可以使用CSS选择器[data-val]，例如`document.querySelectorAll（＆＃34; [数据-VAL]＆＃34）。

这是您的代码段的一个版本，带有一些最小的更新;见评论：

＆＃13;

// 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);
    }
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

您可能会做出一些进一步的更改：

将所有代码包裹在IIFE中，这样就没有任何全局。
将输入及其标签包裹在label元素中，并切换它们的可见性而不是直接输入。
将容器中的东西包裹起来，而不是使用br。

Answer 2

你可以这样做：

在要切换的元素上添加公共类（可以在span中包装标签和字段）
切换显示，可以使用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元素中。

＆＃13;

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";
   
}

＆＃13;

#hidden_elements span {
display: none;
}

＆＃13;

<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>

＆＃13;

Answer 4

我的解决方案为所有输入添加额外的div，并为此div添加id

＆＃13;

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"
}

＆＃13;

<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" />

＆＃13;

使用html属性设置javascript变量

4 个答案: