Innocent Monareng Innocent Monareng - 4 months ago 21
CSS Question

Place text when you select inside a div when you select a radio button.

I have radio button inside accordion as follows:

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


The accordion heading are aligned to the left. And the radio button labeled "Yes" is checked in buy default. I want to the word Yes placed the div with class of "panel-heading" next to the h4 tag and aligned right. When you check the "No" radio button I want No to be there. How can I do this?

Answer

Though the question is not quite clear. But this is the code to get you the value of the checked radio button.

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

the $('#text') is the id of a div displaying the checked radio button value for demo.

Check Working example

Comments