ラジオオプションが選択されているときに2つのdivを表示

Question

ラジオオプションが選択されているときに2つのDIVを表示したいとします。例えば以下は、私がfirstblockまたはsecondblockのいずれかのオプションを選択した後にのみ表示されるように、アップロードボタンをしたいと思い、私の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>

です。それを行う簡単な方法はありますか？

ありがとうございます。

Answer 1

すでに行ったように同じものを使用してください。

#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>

---

いくつかの改善提案：：ここで

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

はスニペットです

使用したい場合にも、あなたのCSSを縮小化することができます同じcss-ルール。複数のidsやクラスに同じルールを設定することをお勧めします。

これは、次のようになります。

#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>