資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
