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问题＆＃34; showThis ＆＃34;显示＆＃34; buttonToHideThis ＆＃34;在文件准备就绪时检查。任何帮助将不胜感激。

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

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

1 个答案: