Question

我试图在选择特定的单选按钮时显示特定的表单。

以下是单选按钮： -

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

当我们选择工作广播时，需要打开另一个表单。当我们选择 nonworking 时，需要有不同的表单。

最初，我是通过 document.getElementById（＆＃34; demo＆＃34;）。innerHTML 来做的，但是，有人建议在innerHTML中使用太多的表单不是一件好事理念。那么我完成这项任务的最佳方式是什么？

欢迎任何建议。

Answer 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

Answer 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必须是唯一的

您也可以考虑使用外部库进行模板化。

Answer 3

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

Show form on radio button select

Answer 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库。

在无线电选择上显示特定值

4 个答案: