溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在Web表單中，可以使用RadioGroup與日期范圍選擇器進行聯動，以實現不同選項對應不同的日期范圍選擇。
例如，可以創建一個RadioGroup，其中包含兩個選項：“最近一周”和“最近一個月”。用戶可以選擇其中一個選項后，下方會顯示相應的日期范圍選擇器，讓用戶選擇對應的日期范圍。
在實現這種聯動時，可以通過JavaScript監聽RadioGroup的選項變化事件，根據用戶選擇的選項動態顯示或隱藏日期范圍選擇器。具體代碼示例如下：
<!DOCTYPE html>
<html>
<head>
<title>RadioGroup與日期范圍選擇器聯動示例</title>
</head>
<body>
<form>
<input type="radio" name="dateRange" value="week" id="weekOption"> 最近一周
<input type="radio" name="dateRange" value="month" id="monthOption"> 最近一個月
<div id="weekRange" style="display: none;">
<label for="startDate">開始日期：</label>
<input type="date" id="startDate">
<label for="endDate">結束日期：</label>
<input type="date" id="endDate">
</div>
<div id="monthRange" style="display: none;">
<label for="startDate">開始日期：</label>
<input type="date" id="startDate">
<label for="endDate">結束日期：</label>
<input type="date" id="endDate">
</div>
</form>
<script>
const weekOption = document.getElementById('weekOption');
const monthOption = document.getElementById('monthOption');
const weekRange = document.getElementById('weekRange');
const monthRange = document.getElementById('monthRange');
weekOption.addEventListener('change', function() {
if (weekOption.checked) {
weekRange.style.display = 'block';
monthRange.style.display = 'none';
}
});
monthOption.addEventListener('change', function() {
if (monthOption.checked) {
monthRange.style.display = 'block';
weekRange.style.display = 'none';
}
});
</script>
</body>
</html>
以上示例中，用戶可以選擇“最近一周”或“最近一個月”選項，選擇后對應的日期范圍選擇器會顯示出來，讓用戶選擇具體的日期范圍。通過JavaScript監聽RadioGroup的選項變化事件，實現了日期范圍選擇器的聯動效果。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
