Question

手风琴里面有单选按钮如下：

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1">Collapsible Group 1</a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="col-sm-6">
                    <i class="fa fa-laptop fa-4x turquoise" aria-hidden="true"></i><br>
                    <label class="automaticaBRK">
                        <input name="designLayout" type="radio" id="designLayout_0" form="businessCards" value="yes" checked><br>
                        Yes
                  </label>
                </div>
                <div class="col-sm-6">
                    <i class="fa fa-laptop fa-4x orange" aria-hidden="true"></i><br>
                    <label class="automaticaBRK">
                        <input name="designLayout" type="radio" id="designLayout_1" form="businessCards" value="no"><br>No
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo1">Collapsible Group 2</a></h4>
        </div>
        <div id="collapseTwo1" class="panel-collapse collapse">
            <div class="panel-body">Content for Accordion Panel 2</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree1">Collapsible Group 3</a></h4>
        </div>
        <div id="collapseThree1" class="panel-collapse collapse">
            <div class="panel-body">Content for Accordion Panel 3</div>
        </div>
    </div>
</div>

手风琴标题与左侧对齐。标有“是”的单选按钮在购买默认情况下进行检查。我希望单词Yes将div放在h4标签旁边的“panel-heading”类并右对齐。当你检查“否”单选按钮时，我希望不在那里。我怎样才能做到这一点？

Answer 1

虽然问题不太清楚。但这是获取已检查单选按钮值的代码。

$(document).ready(function() {
 //To show yes by default
  $("#text").html($('input[type="radio"]:checked').val());
  $('input[type="radio"]').on('click change', function(e) {
    $("#text").html(($(this).val()));
});
});

$('#text')是显示已检查的单选按钮值的div的id。

检查工作example

Answer 2

在您的html h4列中，您可以使用它来包含一个范围：它会使其对齐

<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2"            href="#collapseOne1">Collapsible Group 1</a><span id="reply" class="pull-right"></span></h4>.

以下jquery应该从开始获取值并在更改时更新它。

document.getElementById("reply").innerHTML = $("input[name=designLayout]:radio:checked").val();
$("input[name=designLayout]:radio").change(function () {         
    document.getElementById("reply").innerHTML = $(this).val();     
});

选择单选按钮时，在div内选择时放置文本。

2 个答案: