javascript - 基于 jQuery 和 Bootstrap 中的 radio 选择扩展表单

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>