如何在一组div (如单选按钮)之间选择一个div？

Question

我有一组divs：

        <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

只需先删除现有的payment_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处理div的外观。

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来改变美学。