数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Bootstrap 和 jQuery 根据多个值显示/隐藏 div 元素？
有时，我们可能需要根据选定的值显示和隐藏 div。例如，您希望根据单选按钮的选定值显示注册或登录表单。
下面，我们将学习如何使用 JQuery 根据选定值显示/隐藏 div 元素。
根据从选择菜单中选定的值显示/隐藏 div 元素
在 JQuery 中，我们可以从“select”菜单中获取选定选项的值。之后，我们可以根据选定的选项值访问 div 元素并显示它们。
语法
用户可以按照以下语法根据从选择菜单中选定的值显示/div 元素。
$('select').on('change', function () {
var value = $(this).val();
$('div').each(function () {
$(this).hide();
});
$('#' + value).show();
});
在上述语法中，每当选择菜单发生“change”事件时，我们都会获取选定选项的值。之后，我们隐藏所有 div 元素，并仅显示 ID 等于选定选项值的 div。
示例
在下面的示例中，我们创建了 <select> 菜单并添加了选项。此外，我们还为每个选项添加了 value 属性。此外，我们创建了 ID 等于选项元素值的 div 元素。
在 JQuery 中，我们在选择菜单上触发“change”事件。在回调函数中，我们获取选定选项的值。之后，我们遍历所有 div 元素并使用 hide() 方法隐藏它们。最后，我们根据选定的选项仅显示 div。
在输出中，用户可以尝试选择不同的选项，它将显示不同的 div 元素。
<html>
<head>
<style> div{ background-color: aqua; width: 500px; padding: 2rem; margin-top: 1rem;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected value from the select menu</h3>
<select>
<option> Choose any value </option>
<option value = "first"> first </option>
<option value = "second"> second </option>
<option value = "third"> third </option>
<option value = "fourth"> fourth </option>
</select>
<div id = "first" style = "display:none"> <p> first </p> </div>
<div id = "second" style = "display:none"> <p> second </p> </div>
<div id = "third" style = "display:none"> <p> third </p> </div>
<div id = "fourth" style = "display:none"> <p> fourth </p> </div>
<script>
// use jQuery to show/hide div based on the value selected in the select menu
$(document).ready(function () {
$('select').on('change', function () {
var value = $(this).val();
$('div').each(function () {
$(this).hide();
});
$('#' + value).show();
});
});
</script>
</body>
</html>
根据复选框是否选中显示/隐藏 div 元素
每当用户选中或取消选中复选框时，我们可以相应地显示/隐藏 div 元素。例如，如果用户选择多个复选框，我们会根据选定的复选框显示多个复选框。
语法
用户可以按照以下语法根据复选框的选定值显示/隐藏 div 元素。
var bool = $(this).attr("value");
$("#" + bool).toggle();
在上述语法中，我们获取复选框的值。每当用户单击复选框时，如果复选框隐藏，则显示；否则，我们使用 toggle() 方法隐藏复选框。
示例
在下面的示例中，我们创建了多个复选框，并为每个复选框提供了值。我们创建了 ID 等于复选框值的 div 元素。
在 JQuery 中，每当用户单击任何复选框时，我们获取复选框值并使用 toggle() 方法切换其显示样式以显示/隐藏 div 元素。
使用这种方法，如果选择了多个复选框，我们可以显示多个 div 元素。
<html>
<head>
<style> div { background-color: aqua; width: 500px; padding: 2rem; margin-top: 1rem;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected checkbox</h2>
<label for = "first_check"> First </label> <input type = "checkbox" id = "first_check" name = "first_check" value="first">
<label for = "second_check"> Second </label> <input type = "checkbox" id = "second_check" name = "second_check" value = "second">
<label for = "third_check"> Third </label> <input type = "checkbox" id = "third_check" name = "third_check" value = "third">
<label for = "fourth_check"> Fourth </label> <input type = "checkbox" id = "fourth_check" name = "fourth_check" value = "fourth">
<div id = "first" style = "display:none"> <p> first </p> </div>
<div id = "second" style = "display:none"> <p> second </p> </div>
<div id = "third" style = "display:none"> <p> third </p> </div>
<div id = "fourth" style = "display:none"> <p> fourth </p> </div>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var bool = $(this).attr("value");
$("#" + bool).toggle();
});
});
</script>
</body>
</html>
根据选定的单选按钮显示/隐藏 div 元素
用户可以从单选按钮组中选择任何单个值。当用户选择任何单选按钮时，我们可以隐藏除所选单选按钮对应的 div 之外的所有其他 div 元素。
语法
用户可以按照以下语法根据选定的单选按钮的值隐藏/显示 div 元素。
$('div').each(function () {
if ($(this).attr("id") == bool) {
$(this).show();
} else {
$(this).hide();
}
});
在上述语法中，我们遍历所有 div 元素，如果它与选定的单选按钮相关，则仅显示一个 div。否则，我们隐藏 div 元素。
示例
在下面的示例中，我们创建了单选按钮组，并为每个单选按钮提供了不同的值。在 JQuery 中，每当用户单击单选按钮时，我们都会获取单选按钮的值。之后，我们使用 each() 方法遍历所有 div 元素。在遍历 div 元素时，我们检查单选按钮的值是否等于 div 元素的 ID，然后显示 div 元素。否则，我们隐藏 div 元素。
<html>
<head>
<style> div { width: 500px; padding: 2rem; margin-top: 1rem; }</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected radio button</h3>
<label for = "first_check"> First </label> <input type="radio" id="first_check" name="group_1" value = "first">
<label for = "second_check"> Second </label> <input type="radio" id="second_check" name="group_1" value="second">
<label for = "third_check"> Third </label> <input type="radio" id="third_check" name="group_1" value="third">
<div id = "first" style = "display:none;background-color: pink;"> <p> first </p> </div>
<div id="second" style="display:none;background-color: blue;"> <p>second</p> </div>
<div id="third" style="display:none;background-color: green;"> <p>third</p> </div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var bool = $(this).attr("value");
$('div').each(function () {
if ($(this).attr("id") == bool) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
</body>
</html>
用户学习了如何根据选定的值显示单个或多个 div。在第一种方法中，我们根据从选择菜单中选定的值显示了 div 元素。用户可以使用第二种方法根据多个选定值显示多个 div 元素。同样，第三种方法将像第一个元素一样工作，根据选定的值显示单个 div 元素。
3K+ 浏览量
