使用jQuery显示基于单选按钮选择的隐藏DIV

您所在的位置：网站首页 › js隐藏某个div › 使用jQuery显示基于单选按钮选择的隐藏DIV

使用jQuery显示基于单选按钮选择的隐藏DIV

2023-03-13 03:54| 来源: 网络整理| 查看: 265

如何根据jQuery中单选按钮的选择显示和隐藏div元素

主题：JavaScript / jQuery

答案：使用 jQuery show() 和 hide() 方法

您可以简单地使用 jQuery show() 和 hide() 方法根据单选按钮的选择来显示和隐藏 div 元素。以下示例中的 div 框默认使用 CSS display 属性隐藏，该属性的值设置为 none。

让我们通过选择不同的单选按钮来试试这个例子，看看它是如何工作的：

示例 jQuery Show Hide Elements Using Radio Buttons .box{ color: #fff; padding: 20px; display: none; margin-top: 20px; } .red{ background: #ff0000; } .green{ background: #228B22; } .blue{ background: #0000ff; } $(document).ready(function(){ $('input[type="radio"]').click(function(){ var inputValue = $(this).attr("value"); var targetBox = $("." + inputValue); $(".box").not(targetBox).hide(); $(targetBox).show(); }); }); red green blue You have selected red radio button so i am here You have selected green radio button so i am here You have selected blue radio button so i am here FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

在 jQuery 中基于复选框的点击显示和隐藏 DIV 元素在 jQuery 中基于下拉选择显示和隐藏 DIV 元素如何使用 jQuery 检查元素是否可见

【本文地址】

使用jQuery显示基于单选按钮选择的隐藏DIV

使用jQuery显示基于单选按钮选择的隐藏DIV

今日新闻

推荐新闻