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()方法添加一个显示所选单选按钮范围的类

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: