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

Question

我有 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;
}

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

Answer 1

给他们起相同的名字。

<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