Question

我有一组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>

我的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。

'XWPFDocument docx = new XWPFDocument(
            new FileInputStream(
                    "D://TestDocumentPrep/src/XXXXX_TestReport_URL_Document.docx"));
    XWPFWordExtractor we = new XWPFWordExtractor(docx);
    String textData = we.getText();
    String newTestData=textData.replace("$var_source_code$", list.get(1))
            .replace("$var_rsvp_code$", list.get(2))
            .replace("$var_ssn$", list.get(3))
            .replace("$var_zip_code$", list.get(4))
            .replace("$var_point_for_business$",
                    anotherData.getPointForBusiness())
            .replace("$var_E1_url$", anotherData.getE1url())
            .replace("$var_E2_url$", anotherData.getE2url())
            .replace("$var_E3_url$", anotherData.getE3url());
    System.out.println(newTestData);'

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

Answer 4

您只需将现有的复选标记移动到新位置即可。无需删除任何内容并重新获得：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在一组div（例如单选按钮）之间仅选择一个div？

4 个答案: