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> 

그리고 또 다른 문제는 브라우저 크기를 조정할 때, 그것은이

* UPDATE처럼되고 있다는 것입니다 : 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; 
} 

* UPDATE : 2, follwing을 buttonset 클릭하면 작동하지 않음

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

에주의를 표시 할 스타일을. 그룹의 입력 필드는 같은 이름입니다. 이 경우 옵션 옵션 2

$('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>을 추가 한 그것은 HTML의 변화에 ​​표시 점을