0

How do I get the value of a checked radio button and output it inside a corresponding element?

I' running into troubles since I like to load the values of the checked radio buttons on page load.

Thank you in advance!

input{
display: none;
}

label{
display: inline-block;
width:20%;
cursor: pointer;
padding: 20px;
margin: 10px;
background: #eee;
color: #111;
}

input:checked + label{
background: #111;
color: #fff;
}

div{
  background: #111;
  color: #fff;
  padding: 10px;
  margin: 4px;
}

div span{
  display: block;
  margin: 4px;
}

.title{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="a" type="radio" name="group1" value="Description group1 1" checked>
<label for="a">Group1 Radio1</label>
<input id="b" type="radio" name="group1" value="Description group1 2">
<label for="b">Group1 Radio2</label>
<input id="c" type="radio" name="group1" value="Description group1 3">
<label for="c">Group1 Radio3</label>


<input id="d" type="radio" name="group2" value="Description group2 1" checked>
<label for="d">Group2 Radio1</label>
<input id="e" type="radio" name="group2" value="Description group2 2">
<label for="e">Group2 Radio2</label>
<input id="f" type="radio" name="group2" value="Description group2 3">
<label for="f">Group2 Radio3</label>

<!-- Output value here -->
<div id="group1">
<span class="title">Group1</span>
<span class="selected"></span>
</div>

<div id="group2">
<span class="title">Group2</span>
<span class="selected"></span>
</div>
Arthur S.
  • 307
  • 1
  • 2
  • 13
  • 3
    Do you have any JS already or are you asking for a tutorial? In both cases try the search first: http://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button – mwoelk Oct 04 '16 at 16:08

2 Answers2

2

You may use the change event:

$(':radio[name="group1"], :radio[name="group2"]').on('change', function(e) {
  $('#' + this.getAttribute('name') + ' .selected').text(this.value);
});

//
// This to get the checked radios
//
$(':radio[name="group1"]:checked, :radio[name="group2"]:checked').trigger('change');
input{
  display: none;
}

label{
  display: inline-block;
  width:20%;
  cursor: pointer;
  padding: 20px;
  margin: 10px;
  background: #eee;
  color: #111;
}

input:checked + label{
  background: #111;
  color: #fff;
}

div{
  background: #111;
  color: #fff;
  padding: 10px;
  margin: 4px;
}

div span{
  display: block;
  margin: 4px;
}

.title{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input id="a" type="radio" name="group1" value="Description group1 1" checked>
<label for="a">Group1 Radio1</label>
<input id="b" type="radio" name="group1" value="Description group1 2">
<label for="b">Group1 Radio2</label>
<input id="c" type="radio" name="group1" value="Description group1 3">
<label for="c">Group1 Radio3</label>


<input id="d" type="radio" name="group2" value="Description group2 1" checked>
<label for="d">Group2 Radio1</label>
<input id="e" type="radio" name="group2" value="Description group2 2">
<label for="e">Group2 Radio2</label>
<input id="f" type="radio" name="group2" value="Description group2 3">
<label for="f">Group2 Radio3</label>

<!-- Output value here -->
<div id="group1">
    <span class="title">Group1</span>
    <span class="selected"></span>
</div>

<div id="group2">
    <span class="title">Group2</span>
    <span class="selected"></span>
</div>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
1

$(document).ready(function(){
  $("#group1 .selected").html($("input[name=group1]:checked").val());
  $("#group2 .selected").html($("input[name=group2]:checked").val());
 })
input{
display: none;
}

label{
display: inline-block;
width:20%;
cursor: pointer;
padding: 20px;
margin: 10px;
background: #eee;
color: #111;
}

input:checked + label{
background: #111;
color: #fff;
}

div{
  background: #111;
  color: #fff;
  padding: 10px;
  margin: 4px;
}

div span{
  display: block;
  margin: 4px;
}

.title{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="a" type="radio" name="group1" value="Description group1 1" checked>
<label for="a">Group1 Radio1</label>
<input id="b" type="radio" name="group1" value="Description group1 2">
<label for="b">Group1 Radio2</label>
<input id="c" type="radio" name="group1" value="Description group1 3">
<label for="c">Group1 Radio3</label>


<input id="d" type="radio" name="group2" value="Description group2 1" checked>
<label for="d">Group2 Radio1</label>
<input id="e" type="radio" name="group2" value="Description group2 2">
<label for="e">Group2 Radio2</label>
<input id="f" type="radio" name="group2" value="Description group2 3">
<label for="f">Group2 Radio3</label>

<!-- Output value here -->
<div id="group1">
<span class="title">Group1</span>
<span class="selected"></span>
</div>

<div id="group2">
<span class="title">Group2</span>
<span class="selected"></span>
</div>
Marcos Alexandre Sedrez
  • 537
  • 3
  • 13