选择另一个单选按钮字段时重置单选按钮字段的最佳方法

best way to Reset radio button fields on selecting another one

本文关键字：字段 单选按钮 最佳 方法 另一个 选择      更新时间：2023-09-26

我有 3 个单选按钮，1.按日期搜索2.按月搜索3.按年份搜索当单击一个单选按钮时，它会显示一个HTML日历来选择日期/月/年。

如何在选择其他单选按钮时重置其他选项的日历值？

HTML部分像

<input type="radio" name="search" id="byDate"> 
<label for="byDate">search by date</label>           
<div class="reveal-if-active">        
    <input type="date" name="calendar"  ><br>    
</div>
<input type="radio" name="search" id="byMonth">  
<label for="byMonthT">search by Month</label>          
<div class="reveal-if-active" >        
     <input type="date" name="calendar"  ><br>    
</div>
<input type="radio" name="search" id="byYear" > 
<label for="byYear">search by Year</label>
<div class="reveal-if-active">        
    <input list="year" name = "syear">
     <datalist id = "byYear">
     <option value="2016"> 
     <option value="2017">
     <option value="2018>
     </datalist>
 </div>

和CSS部分像 

.reveal-if-active {
 opacity: 0;
 max-height: 0;
 overflow: hidden;
 font-size: 16px;
 -webkit-transform: scale(0.8);
 transform: scale(0.8);
 -webkit-transition: 0.5s;
 transition: 0.5s;
 }
 input[type="radio"]:checked ~ .reveal-if-active,
 input[type="radio"]:checked ~ .reveal-if-active
 input[type="radio"]:checked ~ .reveal-if-active {
 opacity: 1;
 max-height: 100px;
 padding: 10px 20px;
 -webkit-transform: scale(1);
 transform: scale(1);
 overflow: visible;
}

假设我首先选择"按日期搜索"并在那里输入一些值。 我想在选择"按月搜索"时清除该值。

给它们起相同的名字。

<input type="radio" name="test" value="val1">test1
<br>
<input type="radio" name="test" value="val1">test2
<br>
<input type="radio" name="test" value="val1">test3

相关文章：