Question

我正在为订单表单创建一个单选按钮选择列表。每个问题都有一个包含带有附加信息的div的答案。我将它们全部设置为在单击单选按钮时显示div，但是当您转到下一个问题并单击某个选项时，它会隐藏上述答案并取消选择上一个问题的单选按钮。

编辑澄清：每个问题只有一个单选按钮选项会显示附加信息框。因此，如果您对问题1单击“是”，则会显示一个信息框。如果您在问题1上单击否，则表示没有信息框。

我希望之前的单选按钮保持选中状态。我从这段代码开始，并将其修改为有多个问题：

    [Route("/test", Verbs = "GET")]
    public class Dto : IReturnVoid
    { }

    public class DtoService : Service
    {
        //So that IGetContextItems is taken care of by IDependencyThatUsesIGetContextItems
        public IDependencyThatUsesIGetContextItems DependencyThatUsesIGetContextItems { get; set; }

        public void Get(Dto req)
        {
            DependencyThatUsesIGetContextItems.SomeMethod();
        }
    }

    public interface IGetContextItems
    {
        string Get(string key);
    }
    //since ContextItemsGetter implmeents IRequiresRequest
    //I can still easily test any service that uses IGetContextItems by mocking IGetContextItems
    public class ContextItemsGetter : IGetContextItems, IRequiresRequest
    {
        public IRequest Request { get; set; }

        public string Get(string key)
        {
            //either through injection
            //return Request.Items[key].ToString();

            //or some static class
            //return RequestContext.RequestItems.Items[key].ToString();
            return RequestContext.Instance.Items[key].ToString();
        }
    }

    public interface IDependencyThatUsesIGetContextItems
    {
        string SomeMethod();
    }
    public class DependencyThatUsesIGetContextItems : IDependencyThatUsesIGetContextItems
    {
        //this will be inejcted
        public IGetContextItems ContextItemsGetter { get; set; }

        public string SomeMethod()
        {
            var a = ContextItemsGetter.Get("SomeKey");
            return "blah";
        }
    }

这是jsfiddle：https://jsfiddle.net/lenniejane/d58phaua/

Answer 1

首先你需要设置不同的单选按钮名称，我还在html中进行了一些更改：

<div id="tabs">
  <div class="nav">
    <p><strong>QUESTION 1</strong></p>

    <div class="answers">
      <p><input name="tab" type="radio" value="residential-yes">Yes</p>
      <p><input name="tab" type="radio" value="residential-no">No</p>
    </div>

    <div class="tab" id="div1">
      <p class="fee-notice">ADDITIONAL INFO 1</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 2</strong></p>


    <div class="answers">
      <p><input name="tab2" type="radio" value="lift-yes">Yes</p>
      <p><input name="tab2" type="radio" value="lift-no">No</p>
    </div>

    <div class="tab" id="div2">
      <p class="fee-notice">ADDITIONAL INFO 2</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 3</strong></p>

    <div class="answers">
      <p><input name="tab3" type="radio" value="inside-yes">Yes</p>
      <p><input name="tab3" type="radio" value="inside-no">No</p>
    </div>

    <div class="tab" id="div3">
      <p class="fee-notice">ADDITIONAL INFO 3</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 4</strong></p>

    <div class="answers">
      <p><input name="tab4" type="radio" value="inside-yes">Yes</p>
      <p><input name="tab4" type="radio" value="inside-no">No</p>
    </div>

    <div class="tab" id="div4">
      <p class="fee-notice">ADDITIONAL INFO 4</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>


</div>

css：

.tab {
  display: none;
}

.nav.showtab .tab{
  display:block;
}

和js将是这样的：

var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');

for(i=0; i<inputsEle.length; i++){
    inputsEle[i].addEventListener("change", function(e){
        var thiisNav = e.target.parentElement.parentElement.parentElement;
        diplayNewTab(thiisNav)
    });
}

function diplayNewTab(thiisNav){
    for(i=0; i<navEle.length; i++){
            navEle[i].classList.remove("showtab");
    }
    thiisNav.className += ' showtab';
}

https://jsfiddle.net/d58phaua/2/

<强>更新

如果您在回答其他问题时需要保留以前问题的“附加信息”，请使用此js：

var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');

for(i=0; i<inputsEle.length; i++){
    inputsEle[i].addEventListener("change", function(e){
        var thiisNav = e.target.parentElement.parentElement.parentElement;
        thiisNav.className += ' showtab';
    });
}

演示：https://jsfiddle.net/d58phaua/3/

Answer 2

https://jsfiddle.net/d58phaua/1/

你走了。

您只需要添加不同名称的单选按钮

<input name="tab1" type="radio" value="residential-no">No</p>

选中单选按钮时显示div

2 个答案: