Come si seleziona una sola divisione tra un gruppo di div come un pulsante di scelta?

Question

Ho gruppo di div:

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

miei 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); 

      } 
     } 

La mia domanda è: come faccio a fare quei tre div come un pulsante di scelta? Quindi un utente può selezionarne solo uno?

Answer 1

Rimuovere semplicemente prima l'intervallo di pagamento_select esistente prima di aggiungerne uno nuovo.

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

Prova questo, basta rimuovere il div aggiunto mentre fai clic su qualsiasi 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

È possibile aggiungere una classe al div quando viene cliccato e gestire l'aspetto di quel div usando i 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); 

     } 

Lì, hai il div selezionato con la classe selezionata e altri non hanno quella classe. Usa CSS per cambiare l'estetica.

Answer 4

Hai solo bisogno di spostare il segno di spunta esistente in una nuova posizione. Non c'è bisogno di rimuovere nulla e reappend ancora:

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>