Отображение определенных значений на радио выбрать

0

Я пытаюсь отобразить конкретные формы при выборе определенных переключателей.

Вот переключатели: -

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

Когда мы выбираем рабочее радио, нужно открыть другую форму. Когда мы выбираем нерабочую, должна быть другая форма.

Первоначально я делал это с помощью document.getElementById("demo"). InnerHTML, но мне было предложено использовать слишком много форм внутри innerHTML, это не очень хорошая идея. Тогда как лучше всего выполнить эту задачу?

Любые предложения приветствуются.

  • 1
    Вместо этого id должен быть уникальным классом использования.
Теги:
forms

4 ответа

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>

Демо-версия скрипта

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

дать им разные идентификаторы

создайте такую модель.

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

0

Вы можете взглянуть на этот вопрос. Это может служить вашей цели.

Показать форму на кнопке выбора радио

0

Ваше решение в порядке, и я не вижу серьезных проблем с ним.

Вы также можете добавить все формы в 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>

EDIT: вам нужно изменить идентификаторы элементов. Идентификатор должен быть уникальным

Также вы можете рассмотреть возможность использования или внешних библиотек для шаблонов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню