Versteckte Anzeige neben dem aktivierten Optionsfeld anzeigen, wenn auf die Schaltfläche zum Senden geklickt wird

Question

Ich habe eine Webseite mit 25 Q's. Und jeder hat 4 Optionen. Wenn der Benutzer auf die Schaltfläche klickt, sollte "Glyphicon-ok" angezeigt werden und "Glyphicon-Remove" neben den aktivierten Optionsfeldern sollte angezeigt werden. Wie es geht.

Was soll ich in unten Funktion hinzufügen.

$("#sub").click(function(){ 

}); 

Ich habe versucht, mit Hilfe von CSS

/* 
.glyphicon-remove 
{ 
display: none; 
} 

input:checked + span{ 
display: block; 
} 
*/ 

Meine Html:

<form> 
    <div class="form-group"> 
     <label for="usr">Q25: A small bullet can kill a man if its momentum is great, a heavy truck moving a small speed can kill a man easily sue to it momentum.-> Is as per which law of motion </label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" value="-0.33" name="optradio25">first<span class="glyphicon glyphicon-remove"></span></label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" value="1" name="optradio25"> second <span class="glyphicon glyphicon-ok"></span></label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" value="-0.33" name="optradio25">third<span class="glyphicon glyphicon-remove"></span></label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" value="-0.33" name="optradio25">none<span class="glyphicon glyphicon-remove"></span></label> 
    </div> 
    <br /> 
    <table class="table table-hover" style="width: 100%;border: 0px"> 
     <tbody> 
      <tr> 
       <td> 
        <button id="sub" type="button" class="btn btn-primary">Submit</button> 
       </td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <td align="right"> 
        <button id="reset" type="button" class="btn btn-success">Reset</button> 
       </td> 

      </tr> 
     </tbody> 
    </table> 

</form> 

Answer 1

Sie können die .next() Methode von jQuery verwenden, um eine Klasse hinzuzufügen, die die Spanne des ausgewählten Optionsfeld zeigen

$("#sub").click(function(){ 
 
    $('input[type="radio"]:checked').next('span').addClass('show'); 
 
});

.show { 
 
    display: inline-block !important; 
 
} 
 

 
span { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
     <label for="usr">Q25: A small bullet can kill a man if its momentum is great, a heavy truck moving a small speed can kill a man easily sue to it momentum.-> Is as per which law of motion </label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">first <span class="glyphicon glyphicon-remove">icon</span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="1" name="optradio25"> second <span class="glyphicon glyphicon-ok">icon2</span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">third<span class="glyphicon glyphicon-remove"></span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">none<span class="glyphicon glyphicon-remove"></span></label> 
 
    </div> 
 
    <br /> 
 
    <table class="table table-hover" style="width: 100%;border: 0px"> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        <button id="sub" type="button" class="btn btn-primary">Submit</button> 
 
       </td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <td align="right"> 
 
        <button id="reset" type="button" class="btn btn-success">Reset</button> 
 
       </td> 
 

 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
</form>

Answer 2

Hier ist, wie warten Sie 500 ms und dann die Spannweite langsam verblassen. Ich habe zu Demonstrationszwecken einen Text in die Spanne eingefügt.

$("#sub").click(function(){ 
 
    $(".glyphicon-remove").delay(500).fadeIn("slow"); 
 
    $(".glyphicon-ok").delay(500).fadeIn("slow"); 
 
});

.glyphicon-remove 
 
{ 
 
display: none; 
 
} 
 

 
.glyphicon-ok 
 
{ 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
     <label for="usr">Q25: A small bullet can kill a man if its momentum is great, a heavy truck moving a small speed can kill a man easily sue to it momentum.-> Is as per which law of motion </label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">first <span class="glyphicon glyphicon-remove">icon</span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="1" name="optradio25"> second <span class="glyphicon glyphicon-ok">icon2</span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">third<span class="glyphicon glyphicon-remove"></span></label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label><input type="radio" value="-0.33" name="optradio25">none<span class="glyphicon glyphicon-remove"></span></label> 
 
    </div> 
 
    <br /> 
 
    <table class="table table-hover" style="width: 100%;border: 0px"> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        <button id="sub" type="button" class="btn btn-primary">Submit</button> 
 
       </td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <td align="right"> 
 
        <button id="reset" type="button" class="btn btn-success">Reset</button> 
 
       </td> 
 

 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
</form>