单击提交按钮时，在选中的单选按钮旁边显示隐藏的跨度

Question

我有一个包含25个Q的网页。每个有4个选项。当用户点击按钮时，应该显示所有的glyphicon-ok应用程序，并且应该显示选中的单选按钮旁边的glyphicon-remove。怎么做。

我应该在下面的函数中添加什么。

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

}); 

我尝试使用CSS

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

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

我的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

您可以使用jQuery的.next()方法添加一个类，将显示所选单选按钮的跨度

$("#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

以下是如何等待500毫秒，然后慢慢淡入跨度。出于演示的原因，我在范围中插入了一段文字。

$("#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>