チェックされたラジオボタンの値を出力するにはどうすればよいですか？

Question

チェックされたラジオボタンの値を取得して対応する要素の中に出力するにはどうすればよいですか？

ページロード時にチェックされたラジオボタンの値をロードしたいので、問題が発生しています。

ありがとうございます！

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>

Answer 1

あなたは、変更イベントを使用することがあります。

$(':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>

Answer 2

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