javascript - jquery/javascript 单选按钮隐藏/显示页面加载的选中属性的逻辑

Question

我试图根据是否选中单选按钮来编写 jquery/JS 逻辑来隐藏/显示描述。如果在页面加载时选中单选按钮，我希望加载与该单选按钮关联的描述。但是必须选择/选中其中一个默认值

我确实尝试在 ready() 中使用 .change 和 click 方法进行编码。但是没有成功

我只有两个单选按钮，我不是 Javascript/jquery 的人。任何输入表示赞赏。这是一个例子

<div id="ServiceSelection">     
 <input type="radio" name="Service" checked="Checked" value="B"> Option 1
  <br>
 <input type="radio" name="Service" value="P"> Option 2
  <br>
  <div id="DivB" style="display:none" class="desc">B  Description goes here </div>
 <div id="DivP" style="display:none" class="desc">P Description goes here </div>    
</div> 

编辑后的 ​​DIV:

<div id="ServiceSelection">     
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<div id="DivB" style="display:none" class="desc">B  Description goes here </div>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>    
</div> 

提前致谢J

Answer 1

if($('input[name=Service]').is(':checked')){ //is it checked?
    var v = $('input[name=Service]:checked').val(); //get the value
    $('div[id$='+v+']').show(); //target the end of selector, and match it to our value
}

$('input[name=Service]').on('click', function(){
   $(this).parent().find('div').hide(); //hide the divs...
   $('div[id$='+$(this).val()+']').show(); //show the div based on our value again..
});    

fiddle