Formular basierend auf Radioauswahl in jQuery & Bootstrap erweitern

Question

Ich versuche, einen Teil eines Formulars zu zeigen, basierend auf der Eingabe eines Besuchers. Momentan, wenn ich den Radiobutton-Wert ändere, zeigt er immer noch den Teil der Form der letzten getroffenen Auswahl an. Was ich möchte, ist, wenn der Benutzer den Wert des <input type="radio"> ändert und wenn es nur einen Teil des Formulars sichtbar gemacht hat, um es wieder verschwinden zu lassen, da es nicht erforderlich ist. Ich denke, man kann die Idee von dem, was ich will, wenn ich meinen Code aktuellen Code und füge ihn hier nach unten und sehen Sie selbst, was da schief geht:

$(document).ready(function() { 
 
\t $('input[name="Selection"]').click(function() { 
 
    \t if($(this).attr('id') == 'Selection-1') 
 
    { 
 
    \t $("#Selection-1-container").toggleClass('hidden'); 
 
    } 
 
    else if($(this).attr('id') == 'Selection-2') 
 
    { 
 
    \t $("#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>

Gibt es jemanden, der vorschlagen kann, was Ich sollte hinzufügen (ich nehme an, dass ich zu meinem Javascript-Code), um es perfekt funktionieren zu lassen, so wie ich das vorhabe zu arbeiten?

Answer 1

Sie können eine Klasse (wie togglehid) zu Ihren Elementen hinzufügen, die ausgeblendet werden müssen. Dann, wenn Sie auf eine beliebige Checkbox klicken, verstecken Sie diese Klassen. Danach wird man sichtbar.

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

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

 
     \t if($(this).attr('id') == 'Selection-1') 
 
     { 
 
     \t $("#Selection-1-container").toggleClass('hidden'); 
 
     } 
 
     else if($(this).attr('id') == 'Selection-2') 
 
     { 
 
     \t $("#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>