在单选上显示特定值答案

【问题标题】：Displaying particular values on radio select在单选上显示特定值
【发布时间】：2014-02-15 10:53:22
【问题描述】：

我正在尝试在选择特定单选按钮时显示特定表单。

这里是单选按钮：-

<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">

当我们选择 working 收音机时，需要打开一个不同的表单。当我们选择nonworking时，需要有一个不同的表单。

最初，我是通过 document.getElementById("demo").innerHTML 来做的，但是，有人建议我在 innerHTML 中使用过多的表单不是一个好主意。那么我完成这项任务的最佳方式是什么？

欢迎提出任何建议。

【问题讨论】：

id 必须是唯一的使用类。

标签： javascript jquery html forms

【解决方案1】：

我能想到的最简单的方法是使用数据属性从选中的单选按钮中引用相应的表单元素。

我们所要做的就是将带有“data-form="working"' 的单选按钮映射到 ID 为“working”的特定表单

示例代码如下：

$("form").hide();

$("input:radio").on("change", function() {
    $("form").hide();
    $("#" + $(this).attr("data-form") ).show();
});

html 标记应如下所示：

<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">

<form id="working">
    <h2>working form</h2>
</form>

<form id="workingdamaged">
    <h2>workingdamaged form</h2>
</form>

<form id="notworking">
    <h2>notworking form</h2>
</form>

Fiddle Demo

【讨论】：

【解决方案2】：

您的解决方案很好，我认为它没有任何重大问题。

您还可以将所有表单添加到 DOM，并切换它们的可见性。

例如：

<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>

<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">

<script>
var forms = ['working', 'workingdamaged', 'notworking'];

function switch(form) {
  for (var k in forms) {
    forms[k].style.display = 'none';
  }

  document.getElementById('form-' + name).style.display = 'block';
}

var elements = document.getElementsByName('condition');

for (var k in elements) {
  elements[k].onclick = function() {
    if (this.cheked) {
      switch(this.getAttribute('value'));
    }
  }
}

</script>

编辑：您必须更改元素的 ID。 ID 必须是唯一的

您也可以考虑使用模板库或外部库。

【讨论】：

【解决方案3】：

你可以看看这个问题。它可能符合您的目的。

Show form on radio button select

【讨论】：

【解决方案4】：

<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">

给他们不同的ID

创建一个这样的模型。

<div class=content>
     <div class="subcontent" style="display:none" id="select1">//content</div>
     <div class="subcontent" style="display:none" id="select2">//content</div>
     <div class="subcontent" style="display:none" id="select3">//content</div>
 </div>

<script>
$(function(){

$('.selectradio').change(
    function(){
       var sourced=$(this).attr("selection") ;
       $(".subcontent").hide();
       $("#"+sourced).show();
    }
);          

});

</script>

你必须包含 jquery 库。

【讨论】：