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

请使用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来执行此操作。

Answer 2

是的，您可以使用像André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 3

将最后一行更改为：

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

虽然你应该像安德烈建议的那样做，并使用标签。

单选按钮多个问题与列表

3 个答案: