我正在创建一个支持多个联系号码的表单,现在我正在为每个联系号码添加优先级。我的问题是:
如何从中删除检查图像并在选中时将其添加到高单选按钮?
以及如何在我想表格提交时获取价值?
<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);
});
答案 0 :(得分: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);
})
})
答案 1 :(得分:0)
查看以下示例是否有效?
`http://jsfiddle.net/60skshqg/1/`
我在所有单选按钮后添加了<i class="fa"> </i>
,并将其设置为样式以显示勾号