當選擇收音機選項時，顯示2個divs

Question

選擇收音機選項時，我想顯示2個DIV。例如以下是我的HTML

/* Following is my CSS */ 
 

 
    #firstblock { 
 
      display: none; 
 
      padding: 10px; 
 
    }  
 
    #secondblock { 
 
      display: none; 
 
      padding: 10px; 
 
    } 
 
    #uploadButton { 
 
      display: none; 
 
      padding: 10px; 
 
    } 
 
    input[value="firstblock"]:checked ~ #firstblock { 
 
      display: block; 
 
      #uploadbutton: display: block; 
 
    } 
 
    
 
    input[value="secondblock"]:checked ~ #secondblock { 
 
      display: block; 
 
    }

<form id = "selectFeature" method = "POST"> 
 
     <input type="radio" name="action" value="firstblock" /> First Upload 
 
     <input type="radio" name="action" value="secondblock" /> Second Upload 
 
    
 
    <div id ="firstblock" class="show-hide"> 
 
    <h2> Following is first block. <br> </h2> 
 
    </div> 
 
            
 
    <div id="secondblock" class="show-hide"> 
 
     <h2> Following is second block </h2> 
 
     </div> 
 
     
 
    <div id="uploadButton"> 
 
     This is button 
 
    </div> 
 
</form>

我想無論是firstblock或secondblock選項被選中後，方可上傳按鈕出現。有沒有簡單的方法來做到這一點？

在此先感謝。

Answer 1

只需要像你一樣使用。

input[value="firstblock"]:checked ~ #uploadButton  
input[value="secondblock"]:checked ~ #uploadButton 

這裏有一個片段：

#firstblock { 
 
     display: none; 
 
     padding: 10px; 
 
} 
 
    
 
#secondblock { 
 
     display: none; 
 
     padding: 10px; 
 
} 
 

 
#uploadButton { 
 
     display: none; 
 
     padding: 10px; 
 
} 
 

 
input[value="firstblock"]:checked ~ #firstblock, 
 
input[value="firstblock"]:checked ~ #uploadButton { 
 
     display: block; 
 
} 
 

 
input[value="secondblock"]:checked ~ #secondblock, 
 
input[value="secondblock"]:checked ~ #uploadButton { 
 
     display: block; 
 
}

<form id = "selectFeature" method = "POST"> 
 
    <input type="radio" name="action" value="firstblock" /> First Upload 
 
    <input type="radio" name="action" value="secondblock" /> Second Upload 
 

 
<div id ="firstblock" class="show-hide"> 
 
<h2> Following is first block. <br> </h2> 
 
</div> 
 

 
<div id="secondblock" class="show-hide"> 
 
    <h2> Following is second block </h2> 
 
    </div> 
 

 
<div id="uploadButton"> 
 
    This is button 
 
</div> 
 
</form>

---

一些改進建議：

您還可以再壓縮你的CSS，如果你想使用同樣的css-規則。如果您想要將相同的規則設置爲多個ID或類，建議使用它。

這可能是這樣的：

#firstblock, 
#secondblock, 
#uploadButton { 
    display: none; 
    padding: 10px; 
} 

input[value="firstblock"]:checked ~ #firstblock, 
input[value="firstblock"]:checked ~ #uploadButton, 
input[value="secondblock"]:checked ~ #secondblock, 
input[value="secondblock"]:checked ~ #uploadButton { 
     display: block; 
} 

您還可以將標籤添加到您的輸入，因此用戶可以在文本中單擊，將選擇收音機。

範例片段在這裏：

<label> 
 
    <input type="radio" name="action" value="firstblock" id="firstradio"/> 
 
    First Upload 
 
</label> 
 
<label> 
 
    <input type="radio" name="action" value="secondblock" id="secondradio" /> 
 
    Second Upload 
 
</label>