2016-08-02 10 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> 

アコーディオンの見出しは、左に整列しています。購入のデフォルトでは、「はい」と示されたラジオボタンがチェックされています。私は、はい、h4タグの横にある "panel-heading"のクラスでdivを配置し、右揃えという言葉にしたいと思います。 「いいえ」ラジオボタンをチェックすると、いいえを希望します。これどうやってするの?

+0

私たちは、あなたが正確にこれまでのところ明らかではないが、必要なもの – Andrew

+0

を作業それを見ることができますので、あなたはjsfiddleのような何かにあなたのコードを配置することができます。あなたのチェックボックスに変更の種類のイベントリスナーを追加する方法をお探しですか?チェックするとdiv内に "No"を入れますか? – Mitchapp

答えて

1

質問は明確ではありませんが、しかしこれは、チェックされたラジオボタンの価値を得るためのコードです。 $('#text')

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

はデモのためにチェックラジオボタンの値を表示するdiv要素のIDです。あなたのHTML内example

+0

ありがとうございます。デフォルトでは[はい]ラジオボタンがチェックされていますので、どのようにデフォルトで[はい]を表示させることができますか? –

+0

更新された回答を確認してください。 –

+0

ありがとうございます。これは私が探していたものです。申し訳ありませんが、私は明確ではありませんでした。 –

0

あなたはスパンを含めるためにそれを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();  
}); 
関連する問題