找到选中的单选按钮后获取特定的 div

Question

我在一个页面上有几个单选按钮（大约 30 个左右），其中一些单选按钮具有切换 div 的事件（显示/隐藏）。 我试图让在编辑表单时（使用数据库中的数据），如果选择了单选按钮，则无需单击即可显示相关的 div。

我尝试过的代码和示例 html

HTML

<div class="form-group">        
    <div>
        <input type="radio" value="yes">Yes
        <label>
        <input checked="checked"  type="radio" value="No">No</label>
    </div>
</div>

<div class="form-group">       
    <div class="col-xs-3 input-group">
        <input id="buttonToHideThis" onclick="showDiv(this, showThis)" checked="checked" type="radio" value="yes">Yes
        <input onclick="showDiv(this, hideThis)" type="radio" value="no">No
    </div>
</div>

<div class="showThis" style="display: none;">
    <div class="form-group">            
        <div class="col-lg-3 input-group">
            <input id="test" type="text">
        </div>
    </div>
</div>

Javascript

var $rButtons = $('input[type="radio"]');

$.each($rButtons, function () {
    var value = $(this).attr('value');

    if($(this).is(':checked') && value == 'yes'){
       $(this).closest('div').css('background-color', 'green');
    }
});

我无法让 div "showThis" 在文档准备好时检查 "buttonToHideThis" 时显示。任何帮助将不胜感激。

Answer 1

您可以循环浏览刚刚选中的按钮

var checked_button = $('input[type="radio"]:checked');
checked_button.each(function(){
    if($(this).val() == 'yes'){
       $(this).closest('div').css('background-color', 'green');
    }else{
       $(this).closest('div').css('background-color', 'red');
    }
});

Working Demo