当元素为（显示：无）时如何显示选中的收音机元素

Posted 2023-03-27

【中文标题】当元素为（显示：无）时如何显示选中的收音机元素

【英文标题】：how to display elements of checked radio when element are (display: none)

【发布时间】：2021-11-04 19:13:02

【问题描述】：

我要做一个复选框，里面有值。 但是如果选择了默认的radio，里面的值是不会显示的，必须点击。

我知道在style 中使用#IDcheck:checked~#IDelementdisplay:block 的解决方案。但它面临许多限制。

那么有没有脚本代码命令来解决这个问题。

例如解决下面代码中不显示预先勾选的radio-check的问题

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style>
    .box
        display: none;
    

</style>

<script>
$(document).ready(function()
    $('input[type="radio"]').click(function()
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    );
);
</script>
<label>
          <!-- pre checked here -->
       <input type="radio" name="colorRadio" value="red" checked> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>

          <!-- don't show -->
    <div id="idr" class="red box">You have selected red</div>
    <div class="green box">You have selected green</div>

【参考方案1】：

您可以使用以下方式使用 javascript 进行操作。不需要Jquery

function handleSelection(e) 
      const el = document.getElementById(e.value)
      
      const list = document.querySelectorAll('.box')
      
      list.forEach(i=> 
        i.classList.remove('show')
        i.classList.add('hide')
       
      )
      
      el.classList.remove('hide')
      el.classList.add('show')
    

 body 
    font-family: sans-serif;  
    
    
    .box 
      padding-top: 16px;
    
    
    .show 
      display: block;
    
    
    .hide 
      display: none;
    

  
  <label><input type="radio" name="colorRadio" value="red" checked onclick="handleSelection(this)"> red</label>
  <input type="radio" name="colorRadio" value="green" onclick="handleSelection(this)"> green</label>

    <div id="red" class="box show">You have selected red</div>
    <div id='green' class="box hide">You have selected green</div>