Как выбрать только один div между группой divs, как переключатель?

Question

У меня есть группа дивы:

 <div class="row"> 
      <div class="col-xs-12 well bb paylater" value="paylater" onclick="selectPayment(this)">payment1</div> 
      <div class="col-xs-12 well bb alipay" value="alipay" onclick="selectPayment(this)">payment2</div> 
      <div class="col-xs-12 well bb wechatpay" value="wechatpay" onclick="selectPayment(this)">payment3</div> 
     </div> 

Мои JS:

function appendCheckMark(type) { 
      $(type).append('<span class="label label-info payment_select"><i class="glyphicon glyphicon-ok"></i></span>'); 
     } 


     function selectPayment(type) { 
      var val = $(type).attr('value'); 
      if (val == 'paylater') { 
       appendCheckMark(type); 

      } 
      else if (val == 'alipay') { 
       appendCheckMark(type); 

      } 
      else if (val == 'wechatpay'){ 
       appendCheckMark(type); 

      } 
     } 

Мой вопрос, как я могу сделать эти три DIV как кнопки радио? Таким образом, пользователь может выбрать только один из них?

Answer 1

Просто удалите сначала существующий span_select, прежде чем добавить новый.

function selectPayment(type) { 
    //remove existing check here 
    $(type).parent().find('.payment_select').remove(); 
    var val = $(type).attr('value'); 
    if (val == 'paylater') { 
     appendCheckMark(type); 

    } 
    else if (val == 'alipay') { 
     appendCheckMark(type); 

    } 
    else if (val == 'wechatpay'){ 
     appendCheckMark(type); 

    } 
} 

Answer 2

Попробуйте это, просто удалите прилагаемый div, кликнув на любом div.

function appendCheckMark(type) { 
    $(type).append('<span class="label label-info payment_select"><i class="glyphicon glyphicon-ok"></i></span>'); 
    } 


    function selectPayment(type) { 

      $('.payment_select').remove(); 
      var val = $(type).attr('value'); 
      if (val == 'paylater') { 
       appendCheckMark(type); 
      } 
      else if (val == 'alipay') { 
       appendCheckMark(type); 
      } 
      else if (val == 'wechatpay'){ 
       appendCheckMark(type); 
      } 
     } 

Answer 3

Вы можете добавить класс в div, когда он щелкнут, и обработать вид этого div с помощью css.

function selectPayment(type) { 
     var val = $(type).attr('value'); 
     $(type).addClass('selected').siblings().removeClass('selected') 
     if (val == 'paylater') { 
      appendCheckMark(type); 

     } 
     else if (val == 'alipay') { 
      appendCheckMark(type); 

     } 
     else if (val == 'wechatpay'){ 
      appendCheckMark(type); 

     } 

У вас есть выбранный div с выбранным классом, а у других нет этого класса. Используйте css для изменения эстетики.

Answer 4

Вам просто нужно переместить существующую галочку в новом месте. Нет необходимости, чтобы удалить что-нибудь и reappend снова:

function appendCheckMark(type) { 
 
    var $check = $('.payment_select').length ? $('.payment_select') : $('<span class="label label-info payment_select"><i class="glyphicon glyphicon-ok"></i></span>'); 
 
    $(type).append($check); 
 
} 
 

 
function selectPayment(type) { 
 
    var val = $(type).attr('value'); 
 
    appendCheckMark(type); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-12 well bb paylater" value="paylater" onclick="selectPayment(this)">payment1</div> 
 
    <div class="col-xs-12 well bb alipay" value="alipay" onclick="selectPayment(this)">payment2</div> 
 
    <div class="col-xs-12 well bb wechatpay" value="wechatpay" onclick="selectPayment(this)">payment3</div> 
 
</div>