Radiotaste mehrmalige Ausgabe mit Liste

Question

Ich versuche, den Text zu markieren, auf Text auswählen oder eine Liste das Optionsfeld automatisch vom jQuery-Code ausgewählt werden, aber zwischen den letzten beiden Radiobuttons nur

Note sein Looping: ich möchte nur eine Auswahl sollte zwischen 5 Radio-Taste auf Listenauswahl

Hier ist mein Code vorgenommen werden:

$('.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);  
}); 

Und my jsfiddle is here.

Answer 1

Ja, können Sie Label-Tag verwenden, wie André Senra sagt

$('.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>

Und jsfiddle ist hier

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

Answer 2

ändern letzte Zeile dazu:

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

Obwohl Sie sollten lieber tun als Andre schon sagt, und ein Etikett verwenden.

Answer 3

Bitte verwenden HTML5 Label Element wie folgt:

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

Sie Javascript nicht brauchen, dies zu tun.