So blenden Sie Tabellen mit Optionsfeldern ein und aus?

Question

Haben Sie eine Idee, den jQuery-Code neu zu schreiben, um zwischen zwei Auswahlmöglichkeiten zu wählen (Ja und Nein)? .

Ich habe versucht, dies in jQuery:

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("input:radio[name='decision']").change(function(){ 

    if(this.checked){ 
     if(this.value =='one'){ 
      $("#send_to_one").show() && $("#send_to_two").hide() 
     }else if(this.value =='two'){ 
      $("#send_to_two").show() 
     }else{ 
      $("#send_to_one").hide(); 
     } 
    } 
    }); 
}); 

CSS:

#send_to_one{ 
    display:none; 
} 

#send_to_two{ 
    display:none; 
} 

Die Schaltfläche "Ja" send_to_one gut funktioniert, wenn ich es auswählen, werden die richtigen Informationen angezeigt und Die Informationen von send_to_two sind ausgeblendet. Wenn ich den "Nein" Knopf wähle, werden die Informationen von send_to_two angezeigt, aber die send_to_one Informationen werden weiterhin angezeigt. Ich habe versucht, den Befehl von der ersten if-Anweisung zu verwenden, aber das funktioniert nicht. Hast du eine Idee?

Danke für Ihre Hilfe, aber ich füge immer den empfohlenen Befehl die send_to_two Aktion funktioniert nicht.

Das ist meine _form. Habe ich vielleicht einen Fehler gemacht?

<h2>Are you insured?</h2> <div id="send_to"> <input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/> <input type="radio" id="send_poll" name="decision" value="two" />No<br/> <div id="send_to_one"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div> </div> </div> </div> <div id="send_to_two"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"> <div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div> </div> </div> </div> </div> </div>

Vielen Dank für Ihre Hilfe!

Answer 1

Sie sind nur die Haut Anweisung in der zweiten Bedingung fehlt, sollte Ihr Code sein:

if(this.value =='one') 
{ 
    $("#send_to_one").show(); 
    $("#send_to_two").hide(); 
}else if(this.value =='two'){ 
    $("#send_to_two").show(); 
    $("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one' 
}else{ 
    $("#send_to_one").hide(); 
} 

Weil Sie mit Jquery besser, wenn Sie jquery Objekt $(thhis) verwenden:

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("input:radio[name='decision']").change(function() 
    { 
     if($(this).is(':checked') ) 
     { 
      if($(this).val()==='one') 
      { 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
      } 
      else if($(this).val()==='two') 
      { 
       $("#send_to_two").show(); 
       $("#send_to_one").hide(); 
      } 
      else 
      { 
       $("#send_to_one").hide(); 
      } 
     } 
    }); 
}); 

Hoffe das hilft.

$(document).ready(function() { 
 
    $("#send_to_one").hide(); 
 

 
    $("input:radio[name='decision']").change(function(){ 
 
    if($(this).is(':checked')) 
 
    { 
 
     if($(this).val()==='one') 
 
     { 
 
     $("#send_to_one").show(); 
 
     $("#send_to_two").hide(); 
 
     } 
 
     else if($(this).val()==='two') 
 
     { 
 
     $("#send_to_two").show(); 
 
     $("#send_to_one").hide(); 
 
     } 
 
     else 
 
     { 
 
     $("#send_to_one").hide(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name='decision' value='one'/>Yes 
 
<input type="radio" name='decision' value='two' checked/>No 
 
<br/> 
 
<div id="send_to_one"> 
 
    send_to_one div 
 
</div> 
 

 
<div id="send_to_two"> 
 
    send_to_two div 
 
</div>

Answer 2

if(this.checked){ 
     if(this.value =='one'){ 
      $("#send_to_one").show() && $("#send_to_two").hide() 
     }else if(this.value =='two'){ 
      $("#send_to_two").show(); 
      $("#send_to_one").hide() 
     }else{ 
      $("#send_to_one").hide(); 
     } 
    } 

Answer 3

dies versuchen und Ihren Code überprüfen ;

$(document).ready(function() { 
     $("#send_to_one").hide(); 
     $("input:radio[name='decision']").change(function(){ 

     if(this.checked){ 
      if(this.value =='one'){ 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
      }else if(this.value =='two'){ 
       $("#send_to_two").show(); 
       $("#send_to_one").hide(); 
      } 
     } 
     }); 
    }); 

Answer 4

Hoffnung fehlt dies wird Ihnen helfen:

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("#send_to_two").hide(); 
    $("input:radio[name='decision']").click(function(){ 
     if($(this).val() =='one'){ 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
     }else if($(this).val() =='two'){ 
       $("#send_to_one").hide(); 
       $("#send_to_two").show(); 
     }else{ 
       $("#send_to_one").hide(); 
       $("#send_to_two").hide(); 
     } 
    }); 
});