radio按钮切换,下面展示模块的不同显示问题

radio按钮是一种常见的页面控件，用于在多个选项中选择一个选项。当radio按钮状态改变时，下方展示模块的显示内容也会随之改变。

在页面上，通常会有几个radio按钮组成一个单选组。当选择其中一个radio按钮时，其他按钮的选择状态会被取消，只有选中的按钮保持选中状态。一般来说，会设置一个默认选中的按钮。

当用户选择不同的按钮时，与之对应的展示模块的内容也会发生相应的改变。这些展示模块可以是文字、图片、视频等等，根据不同的需求进行设计。

以一个简单的示例来说明，假设有三个radio按钮，“模块1”、“模块2”和“模块3”，下方有三个展示模块，分别对应这三个按钮。初始情况下，默认选中“模块1”的按钮，同时显示“模块1”对应的展示模块内容。

当用户选择其他按钮时，比如选择“模块2”的按钮，那么“模块1”的按钮会取消选中状态，同时展示模块的内容会切换到“模块2”的内容。如果再选择“模块3”的按钮，同样会有相应的切换动作。

通过radio按钮的切换，可以实现不同展示模块的不同显示问题。这样可以在一个页面上展示多个相关内容，方便用户选择查看自己感兴趣的模块，并实时切换显示对应的内容。

相关问题

根据 radio的选择值 显示不同内容

根据radio的选择值显示不同内容是一种常见的前端开发技术。在HTML和JavaScript中，可以使用radio按钮来实现这种功能。具体的实现方式如下：

首先，在HTML中创建一个radio按钮组，给每个radio按钮设置不同的value值，以便区分不同的选择。例如：

<input type="radio" name="option" value="option1"> 选项1
<input type="radio" name="option" value="option2"> 选项2
<input type="radio" name="option" value="option3"> 选项3

然后，在JavaScript中，使用事件监听来捕捉radio按钮的选择变化，并根据所选值来显示不同的内容。例如：

// 获取radio按钮组
var radioGroup = document.getElementsByName("option");

// 监听选择变化事件
for (var i = 0; i < radioGroup.length; i++) {
  radioGroup[i].addEventListener("change", function() {
    // 获取选择的值
    var selectedOption = document.querySelector('input[name="option"]:checked').value;
    
    // 根据选择的值显示不同的内容
    if (selectedOption === "option1") {
      document.getElementById("content").innerHTML = "选项1内容";
    } else if (selectedOption === "option2") {
      document.getElementById("content").innerHTML = "选项2内容";
    } else if (selectedOption === "option3") {
      document.getElementById("content").innerHTML = "选项3内容";
    }
  });
}

最后，在页面上创建一个用于显示内容的元素，例如：

<div id="content"></div>

当用户选择不同的radio按钮时，页面上的内容会根据选择的值而发生改变，显示相应的内容。以上是根据radio的选择值显示不同内容的简单示例。具体的实现方式还可以根据需求进行更加复杂的设计和交互。

layui单选按钮不同按钮显示输入框不同

你可以使用 layui 的表单组件和事件监听来实现这个功能。具体步骤如下：

1. 在 HTML 中添加单选按钮和输入框：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">选项</label>
    <div class="layui-input-block">
      <input type="radio" name="option" value="1" title="选项1">
      <input type="radio" name="option" value="2" title="选项2">
      <input type="radio" name="option" value="3" title="选项3">
    </div>
  </div>
  <div class="layui-form-item" id="input1" style="display:none;">
    <label class="layui-form-label">输入框1</label>
    <div class="layui-input-block">
      <input type="text" name="input1" placeholder="请输入输入框1" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" id="input2" style="display:none;">
    <label class="layui-form-label">输入框2</label>
    <div class="layui-input-block">
      <input type="text" name="input2" placeholder="请输入输入框2" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" id="input3" style="display:none;">
    <label class="layui-form-label">输入框3</label>
    <div class="layui-input-block">
      <input type="text" name="input3" placeholder="请输入输入框3" autocomplete="off" class="layui-input">
    </div>
  </div>
</form>

2. 在 JavaScript 中监听单选按钮的变化，根据选中的按钮显示对应的输入框：

// layui表单组件
var form = layui.form;

// 监听单选按钮的变化
form.on('radio(option)', function(data){
  // 隐藏所有输入框
  $('#input1').hide();
  $('#input2').hide();
  $('#input3').hide();
  // 根据选中的按钮显示对应的输入框
  if (data.value == '1') {
    $('#input1').show();
  } else if (data.value == '2') {
    $('#input2').show();
  } else if (data.value == '3') {
    $('#input3').show();
  }
});

3. 最后记得引入 layui 的相关文件：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>