Javascript 如何在一组div之间仅选择一个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>

报酬1
报酬2
报酬3

我的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);

            }
        }

函数附件复选标记（类型）{
$（类型）。追加（“”）；
}
功能选择付款（类型）{
var val=$（类型）.attr（'value'）；
如果（val=='paylater'）{
附加复选标记（类型）；
}
否则，如果（val==‘支付宝’）{
附加复选标记（类型）；
}
否则如果（val=='wechatpay'）{
附加复选标记（类型）；
}
}

---

我的问题是，我如何使这三个div像一个单选按钮？因此，用户只能选择其中一个？

只需先删除现有的付款，然后再添加新的付款

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

    }
}

---

试试这个，只需删除附加的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);
            }
        }

函数附件复选标记（类型）{
$（类型）。追加（“”）；
}
功能选择付款（类型）{
$（'.payment_select'）.remove（）；
var val=$（类型）.attr（'value'）；
如果（val=='paylater'）{
附加复选标记（类型）；
}
否则，如果（val==‘支付宝’）{
附加复选标记（类型）；
}
否则如果（val=='wechatpay'）{
附加复选标记（类型）；
}
}

您可以在单击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);

        }

---

在这里，您选择了类为selected的div，而其他人没有该类。使用css来改变美感。

您只需将现有复选标记移动到新位置即可。无需删除任何内容，然后重新结束：

函数附件复选标记（类型）{
var$check=$（'.payment_-select'）。长度？$（'.payment_-select'）：$（''）；
$（类型）。追加（$check）；
}
功能选择付款（类型）{
var val=$（类型）.attr（'value'）；
附加复选标记（类型）；
}

报酬1
报酬2
报酬3

您的问题不清楚直接向div添加和删除类使用css

函数selectPayment（type）{//删除此处现有的check$（type）.parent（）.find（'.payment_select'）.remove（）；var val=$（type）.attr（'value'）；if（val='paylater'| val='alipay'| val='wechatpay'）{appendCheckMark（type）}}