jQuery & Bootstrap中基于无线电选择的扩展表单

Question

根据访问者的输入，我试图显示表单的一部分。目前，每当我更改单选按钮值时，它仍然会继续显示上次所选内容的形式部分。我想要我的表单做的是，当用户更改<input type="radio">的值时，当它只是使表单的一部分可见时，使它再次消失，因为它不是必需的。我想，当我将我的代码当前代码粘贴到这里，自己看看哪里出了什么问题时，您可以了解我想要的是什么：

​

$(document).ready(function() {
	$('input[name="Selection"]').click(function() {
  	if($(this).attr('id') == 'Selection-1')
    {
    	$("#Selection-1-container").toggleClass('hidden');
    }
    else if($(this).attr('id') == 'Selection-2')
    {
    	$("#Selection-2-container").toggleClass('hidden');
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-md-2" for="Selection">Selection</label>
  <div class="col-md-10">
    <div class="radio">
      <label for="Selection-0">
        <input type="radio" name="Selection" id="Selection-0" value="Value-1" checked="checked">
        When this one selected, neither 'Selection' of the code below.
      </label>
    </div>
    <div class="radio">
      <label for="Selection-1">
        <input type="radio" name="Selection" id="Selection-1" value="Value-2">
        When this one selected, show Selection-1 only.
      </label>
    </div>
    <div class="radio">
      <label for="Selection-2">
        <input type="radio" name="Selection" id="Selection-2" value="Value-3">
        When this one selected, show Selection-2 only.
      </label>
    </div>
  </div>
</div>
<div id="Selection-1-container" class="hidden">
  <h4>Selection 1</h4>
  <hr>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column1">Column1</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column1" name="Column1" type="text"
             placeholder="Column1" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column2">Column2</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column2" name="Column2" type="text"
             placeholder="Column2" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column3">Column3</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column3" name="Column3" type="text"
             placeholder="Column3" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column4">Column4</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column4" name="Column4" type="text"
             placeholder="Column4" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column5">Column5</label>
    <div class="col-md-10">
      <select class="form-control" id="Column5" name="Column5" required>
        <option value>Choose an option...</option>
        <option value>Option 1</option>
      </select>
    </div>
  </div>
</div>
<div id="Selection-2-container" class="hidden">
  <h4>Selection 2</h4>
  <hr>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column6">Column6</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column6" name="Column6" type="text"
             placeholder="Column6" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column7">Column7</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column7" name="Column7" type="text"
             placeholder="Column7" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column8">Column7</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column8" name="Column8" type="text"
             placeholder="Column8" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column9">Column9</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column9" name="Column9" type="text"
             placeholder="Column9" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column10">Column10</label>
    <div class="col-md-10">
      <select class="form-control" id="Column10" name="Column10" required>
        <option value>Choose an option...</option>
        <option value>Option 1</option>
      </select>
    </div>
  </div>
</div>

​

有没有人可以建议我应该添加什么(我假设在我的javascript代码中)，以使它工作得很好，就像我想要的那样？

Answer 1

您可以向需要隐藏的元素中添加类(如togglehid)。然后，如果单击any复选框，则隐藏这些类。在那之后，一个变成可见的。

​

 $(document).ready(function() {
    	$('input[name="Selection"]').click(function() {

          $('.togglehid').addClass('hidden');
          // code changed here --> add the class hidden to all div's with class togglehid

      	if($(this).attr('id') == 'Selection-1')
        {
        	$("#Selection-1-container").toggleClass('hidden');
        }
        else if($(this).attr('id') == 'Selection-2')
        {
        	$("#Selection-2-container").toggleClass('hidden');
        }
      });
    });

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="form-group">
      <label class="control-label col-md-2" for="Selection">Selection</label>
      <div class="col-md-10">
        <div class="radio">
          <label for="Selection-0">
            <input type="radio" name="Selection" id="Selection-0" value="Value-1" checked="checked">
            When this one selected, neither 'Selection' of the code below.
          </label>
        </div>
        <div class="radio">
          <label for="Selection-1">
            <input type="radio" name="Selection" id="Selection-1" value="Value-2">
            When this one selected, show Selection-1 only.
          </label>
        </div>
        <div class="radio">
          <label for="Selection-2">
            <input type="radio" name="Selection" id="Selection-2" value="Value-3">
            When this one selected, show Selection-2 only.
          </label>
        </div>
      </div>
    </div>

    <div id="Selection-1-container" class="togglehid hidden">
    <!-- code changed here too, added the class -->


      <h4>Selection 1</h4>
      <hr>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column1">Column1</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column1" name="Column1" type="text"
                 placeholder="Column1" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column2">Column2</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column2" name="Column2" type="text"
                 placeholder="Column2" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column3">Column3</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column3" name="Column3" type="text"
                 placeholder="Column3" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column4">Column4</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column4" name="Column4" type="text"
                 placeholder="Column4" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column5">Column5</label>
        <div class="col-md-10">
          <select class="form-control" id="Column5" name="Column5" required>
            <option value>Choose an option...</option>
            <option value>Option 1</option>
          </select>
        </div>
      </div>
    </div>

    <div id="Selection-2-container" class="togglehid hidden">
    <!-- code changed here too, added the class -->


      <h4>Selection 2</h4>
      <hr>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column6">Column6</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column6" name="Column6" type="text"
                 placeholder="Column6" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column7">Column7</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column7" name="Column7" type="text"
                 placeholder="Column7" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column8">Column7</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column8" name="Column8" type="text"
                 placeholder="Column8" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column9">Column9</label>
        <div class="col-md-10">
          <input class="form-control text-box single-line" id="Column9" name="Column9" type="text"
                 placeholder="Column9" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="Column10">Column10</label>
        <div class="col-md-10">
          <select class="form-control" id="Column10" name="Column10" required>
            <option value>Choose an option...</option>
            <option value>Option 1</option>
          </select>
        </div>
      </div>
    </div>

​