2016-08-02 58 views
-1

我里面有手风琴单选按钮,如下所示:当您选择一个单选按钮时,在选择div内部时放置文本。

<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标签旁边的“面板标题”,并右对齐。当你检查“否”单选按钮时,我想不到那里。我怎样才能做到这一点?

+0

您可以将您的代码变得像一个的jsfiddle所以我们可以看到它的工作 – Andrew

+0

什么你到底需要的是迄今尚不清楚。您是否在寻找如何将更改类型的事件侦听器添加到您的复选框?当检查放在一个div内的“否”? – Mitchapp

回答

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

+0

谢谢。在默认情况下,是单选按钮被选中,所以如何在默认情况下显示yes? –

+0

检查更新的答案。 –

+0

非常感谢。这是我正在寻找的。对不起,我不清楚。 –

0

在你的HTML,你可以eidt它包括一个跨度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();  
}); 
相关问题