JS实现根据单选按钮选中状态自动显示指定隐藏div

要实现页面初始加载时根据数据控制目标div的显示隐藏，只需在现有代码中添加显示状态控制逻辑即可，同时可以优化代码逻辑并补充交互事件：

修改后的核心JavaScript代码 #

var data = [
   {Queda:  "Sim", Outro: "Teste1", },
];

// 直接取第一条数据（若数据有多条可保留循环逻辑）
var item = data[0];
var Queda = item.Queda;
var Outro = item.Outro;

// 设置单选按钮选中状态并控制div显示
if(Queda === 'Sim'){
  $('#quedpresa').prop('checked' , true);
  $('#quedpresss').show(); // 显示隐藏的div
}else if(Queda === 'Não'){
  $('#quedpresa1').prop('checked' , true);
  $('#quedpresss').hide(); // 保持div隐藏
}
// 填充输入框值
$('#quedpressa1').val(Outro);

// 补充：监听单选按钮切换，实时同步div显示状态
$('input[name="quedpresa"]').on('change', function() {
  $('#quedpresss').toggle($(this).val() === 'Sim');
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>

<form method="POST" class="row g-3 insquedaa2">
  <div class="col-xs-6 col-sm-3">
    <label class="form-label">Queda Presenciada? </label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
    <label for="quedpresa" class="labradio">Sim</label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
    <label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
  </div>

  <div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
    <label for="quedpressa1" class="form-label">Outro   </label>
    <input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
  </div>
</form>

<script>
var data = [
   {Queda:  "Sim", Outro: "Teste1", },
];

var item = data[0];
var Queda = item.Queda;
var Outro = item.Outro;

if(Queda === 'Sim'){
  $('#quedpresa').prop('checked' , true);
  $('#quedpresss').show();
}else if(Queda === 'Não'){
  $('#quedpresa1').prop('checked' , true);
  $('#quedpresss').hide();
}
$('#quedpressa1').val(Outro);

$('input[name="quedpresa"]').on('change', function() {
  $('#quedpresss').toggle($(this).val() === 'Sim');
});
</script>

关键说明 #

1. 初始加载时，根据data中的Queda值，同步设置单选按钮选中状态和目标div的显示/隐藏
2. 补充了单选按钮的切换事件，用户手动修改选择时会自动同步div的显示状态，提升交互体验
3. 优化了原代码的循环逻辑（原循环中每次都取data[0]，直接取第一条数据更简洁）

内容的提问来源于stack exchange，提问作者Bruno