單擊提交按鈕時，在選中的單選按鈕旁邊顯示隱藏的跨度

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>