单选按钮多问题与列表

Radio button multiple issue with list

本文关键字：列表 问题 单选按钮      更新时间：2023-09-26

我正在尝试选择文本，在文本选择或列表选择单选按钮应该由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);    
});

请像这样使用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>

是的，你可以像andr Senra说的那样使用label标签

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

把最后一行改成:

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

尽管你应该像Andre建议的那样，使用标签。

相关文章：