Радиокнопка множественная проблема со списком

Question

Я пытаюсь выбрать текст, по тексту выберите или список выбрать переключатель должна быть выбрана автоматически с помощью кода JQuery, но его зацикливания между двумя последними радиокнопками только

примечанием: я хочу только один выбор должен быть сделан между кнопкой 5 радио по выбору списка

Вот мой код:

$('.saved_card .customerid').click(function() {        
     $('.glyphicon-ok').removeClass('glyphicon-ok'); 
     $('.saved_card .selected_radio').removeClass('selected_radio'); 
     $("i", this).toggleClass('glyphicon-ok'); 
     $(this).toggleClass('selected_radio'); 
     $('input[type="radio"]').not(':checked').prop("checked", true);  
}); 

И my jsfiddle is here.

Answer 1

Да, вы можете использовать маркирующие как Андре Senra говорит

$('.saved_card .customerid').click(function() { 
 

 
    $('.glyphicon-ok').removeClass('glyphicon-ok'); 
 
    $(this).addClass('glyphicon-ok'); 
 
    $('.selected_radio').removeClass('selected_radio'); 
 
    $(this).addClass('selected_radio'); 
 

 
    $('input[type="radio"]').prop("checked", false); 
 
    $(this).find('input[type="radio"]').prop("checked", true); 
 

 
});

ul.saved_card li i { 
 
    height: 48px; 
 
    line-height: 48px; 
 
    font-size: 17px; 
 
    font-weight: lighter; 
 
    margin-right: 10px; 
 
    color: #f00f64; 
 
} 
 
ul.saved_card li { 
 
    height: 50px; 
 
    border: 0; 
 
    border-bottom: 1px solid #fafafa; 
 
    background-color: #fff; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="saved_card"> 
 
    <li class="customerid"> 
 
    <input type="radio" name="customer" value="cust1" id="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i> 
 
    </li> 
 

 
    <li class="customerid"> 
 
    <input type="radio" name="customer" value="cust2" id="cust2" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i> 
 
    </li> 
 

 
    <li class="customerid"> 
 
    <input type="radio" name="customer" value="cust3" id="cust3" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i> 
 
    </li> 
 

 
    <li class="customerid"> 
 
    <input type="radio" name="customer" value="cust4" id="cust4" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i> 
 
    </li> 
 

 
    <li class="customerid"> 
 
    <input type="radio" name="customer" value="cust5" id="cust5" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i> 
 
    </li> 
 
</ul>

И jsfiddle здесь

https://jsfiddle.net/svp4msfu/1/

Answer 2

Изменение последней строки к этому:

$('input[type="radio"]', $(this)).not(':checked').prop("checked", true); 

Хотя вы должны сделать, а как следует Андре, и использовать метку.

Answer 3

Пожалуйста, используйте HTML5 этикетку элемент, как это:

<ul class="saved_card"> 
    <li class="customerid"> 
     <label for="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label> 
     <input type="radio" name="customer" value="cust1" id="cust1"> 
    </li> 
    <li class="customerid"> 
     <label for="cust2">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label> 
     <input type="radio" name="customer" value="cust2" id="cust2"> 
    </li> 
</ul> 

Вам не нужно JavaScript, чтобы сделать это.