活动时带有图像标记的JQuery单选按钮

Question

我正在创建一个支持多个联系号码的表单，现在我正在为每个联系号码添加优先级。我的问题是：

如何从中删除检查图像并在选中时将其添加到高单选按钮？

以及如何在我想表格提交时获取价值？

<div class="panel panel-default">
    <div class="panel-heading">
        <div style="float:left;margin-top:7px;"> Contact Detail </div>
        <div align="right">
            <a class="btn btn btn-default btn-square" onclick="add_contactno()">
                <i class="fa fa-plus"></i>
            </a>
        </div>
    </div>
    <div id="div_contactno" class="panel-body">
        <div id="dynamic_contactno">
            <div class="form-group input-group">
                <span class="input-group-addon">
                    <i class="fa fa-phone"></i>
                </span>
            <input id="contactno1" class="remove_err_onkeyup form-control" type="text" autocomplete="off" onblur="fetchRecord()" placeholder="Contact No" name="contactno[]">
            </div>
            <div class="btn-group pull-right" data-toggle="buttons" style="margin-bottom:15px;">
                <label class="btn btn-primary btn-xs active">
                    <input id="option1" class="radio" type="radio" autocomplete="off" name="options">
                        <i class="fa fa-check"> </i>
                    </input>
                    High
                </label>
                <label class="btn btn-success btn-xs">
                    <input id="option2" class="radio" type="radio" checked="" autocomplete="off" name="options">
                        <i class="fa fa-check"> </i>
                    </input>
                    <i class="fa fa-check"> </i>
                    Medium
                </label>
                <label class="btn btn-warning btn-xs">
                    <input id="option3" class="radio" type="radio" autocomplete="off" name="options">
                        <i class="fa fa-check"> </i>
                    </input>
                    Low
                </label>
            </div>
        </div>
        <div class="form-group input-group" style="">
            <span class="cs_icon_cursor input-group-addon" onmouseout="$(this).children('i').attr('class','fa fa-phone')" onmouseover="$(this).children('i').attr('class','fa fa-times')" onclick="remove_input($(this))">
                <i class="fa fa-phone"></i>
            </span>
            <input id="contactno2" class="form-control" type="text" placeholder="Contact No Ext 123" name="contactno[]">
        </div>
        <div class="btn-group pull-right" data-toggle="buttons" style="margin-bottom: 15px;">
            <label class="btn btn-primary btn-xs active">
                <input id="option1" class="radio" type="radio" autocomplete="off" name="options">
                High
            </label>
            <label class="btn btn-success btn-xs">
                <input id="option2" class="radio" type="radio" checked="" autocomplete="off" name="options">
                <i class="fa fa-check"> </i>
                Medium
            </label>
            <label class="btn btn-warning btn-xs">
                <input id="option3" class="radio" type="radio" autocomplete="off" name="options">
                Low
            </label>
        </div>
    </div>
</div>

另一个问题是，当我调整浏览器大小时，它会变成这样的

*更新：css

element.style {
    position: relative;
}

.btn-group,.btn-group-vertical {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.input-group {
    border-collapse: separate;
    display: table;
}

*更新：单击时，第二个和后面的按钮组不起作用

<div class="btn-group pull-right" data-toggle="buttons" style="margin-bottom: 15px;">
    <label class="btn btn-primary btn-xs">
        <input id="option1" class="radio" type="radio" autocomplete="off" value="1" name="options2">
        High
    </label>
    <label class="btn btn-success btn-xs active">
        <i class="fa fa-check"> </i>
        <input id="option2" class="radio" type="radio" checked="" autocomplete="off" value="medium" name="options2">
        Medium
    </label>
    <label class="btn btn-warning btn-xs">
        <input id="option3" class="radio" type="radio" autocomplete="off" value="low" name="options2">
        Low
    </label>
</div>

$('label.btn').click(function ()
{
var $lab = $(this);
//remove all check icon in group
$lab.parents('.btn-group').find('label.btn i').remove();
//uncheck all input in group
$lab.parents('.btn-group').prop('checked', false);
//add check icon to selected label
$lab.prepend('<i class="fa fa-check"> </i>');
//check selected input radio
$lab.find('input').prop('checked', true);

});     

Answer 1

http://jsfiddle.net/Ltc9nbma/1/

注意html的变化。组中的输入字段具有相同的名称。在这种情况下，选项option2

$('label.btn').click(function () {
    var $lab = $(this);
    //remove all check icon in group
    $lab.parents('.btn-group').find('label.btn i').remove();
    //uncheck all input in group
    $lab.parents('.btn-group').prop('checked', false);
    //add check icon to selected label
    $lab.prepend('<i class="fa fa-check"> </i>');
    //check selected input radio
    $lab.find('input').prop('checked', true);

})


$('#getval').click(function(){
    $('input[name^="option"]:checked').each(function(){
        var name=$(this).attr('name');
        var val=$(this).val();
        alert(name+' is '+val);
    })
})

Answer 2

查看以下示例是否有效？

`http://jsfiddle.net/60skshqg/1/`

我在所有单选按钮后添加了<i class="fa"> </i>，并将其设置为样式以显示勾号