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

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

我确实尝试使用.change编写代码，并在ready（）中单击方法。但是没有成功

我只有两个单选按钮，我不是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> 

选择1


选择2


B这里有描述
P描述在这里

编辑部：

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

选择1


B这里有描述
选择2


P描述在这里

提前谢谢 试试这个：

function ShowData(evt) {
    var val = $("input[name=Service]:checked").val();
    if (val == 'B') {
        $('#DivB').show();
        $('#DivP').hide();
    } else {
        $('#DivP').show();
        $('#DivB').hide();
    }
}

$('input[name=Service]:radio').change(ShowData);
ShowData();

试试这个：

function ShowData(evt) {
    var val = $("input[name=Service]:checked").val();
    if (val == 'B') {
        $('#DivB').show();
        $('#DivP').hide();
    } else {
        $('#DivP').show();
        $('#DivB').hide();
    }
}

$('input[name=Service]:radio').change(ShowData);
ShowData();

我建议：

// hide the div elements with JavaScript, so they're visible to those
// users with JavaScript disabled:
$('#ServiceSelection div[id]').hide();

// select the radio input elements and bind to the change event
$('input:radio').change(function(){
    // find the element whose id is equal to 'Div' + the value of the radio,
    // show that div, hide the sibling div elements
    $('#Div' + this.value).show().siblings('div').hide();
// filter the radio elements to find the one that's checked, and trigger the change event
}).filter(function(){return this.checked; }).change();

参考资料：

我建议：

// hide the div elements with JavaScript, so they're visible to those
// users with JavaScript disabled:
$('#ServiceSelection div[id]').hide();

// select the radio input elements and bind to the change event
$('input:radio').change(function(){
    // find the element whose id is equal to 'Div' + the value of the radio,
    // show that div, hide the sibling div elements
    $('#Div' + this.value).show().siblings('div').hide();
// filter the radio elements to find the one that's checked, and trigger the change event
}).filter(function(){return this.checked; }).change();

参考资料：
---

感谢您的投入。我试着用我刚刚发布的新DIV。当我在fiddle上演示它时，它工作得很好，但是在实际页面上，我应该用document.load方法包装它吗？我做到了。在页面加载中，我看到了第一个选项，但当我单击/更改该选项时，我没有看到第二个测试出现…可能是什么问题@OhgodwhyThanks用于输入。我试着用我刚刚发布的新DIV。当我在fiddle上演示它时，它工作得很好，但是在实际页面上，我应该用document.load方法包装它吗？我做到了。在页面加载中，我看到了第一个选项，但当我单击/更改该选项时，我没有看到第二个测试出现…可能是什么问题@OhgodwhyThanks用于输入。。。我试着用我刚刚发布的新DIV。当我在fiddle上演示它时，它工作得很好，但是在实际页面上，我应该用document.load方法包装它吗？还是其他方法@will.i.Am谢谢你的意见。。。我试着用我刚刚发布的新DIV。当我在fiddle上演示它时，它工作得很好，但是在实际页面上，我应该用document.load方法包装它吗？还是其他方法@will.i.Am感谢David Thomas的支持。但是实际页面启用了JS，这是一个JSP。我是否应该将您建议的代码围绕上述解决方案进行包装？谢谢@David Thomas的输入。但是实际页面启用了JS，这是一个JSP。我是否应该围绕上述解决方案包装您建议的代码？