html/css お問い合わせフォームについて

Question

htmlとcssでお問い合わせフォームを作成しています。
ラジオボタンでチェックされた項目によって
チェックボタンを表示させたいのですが
うまくできません。

選択していない場合はチェックボタンを非表示にしたい場合

どのようにすれば良いのでしょうか？

html
ーチェックボックスー

          <div>                
            <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ" >
            <label for="i_qtype01">お問い合わせ</label>
          </div>
          <div>                
            <input id="i_qtype02" type="radio" name="qtype" value="資料請求" >
            <label for="i_qtype02">資料請求</label>
          </div>

ーお問い合わせのラジオボタンにチェックした場合にだけ表示したいチェックボックスー
<div class="data-contents">
<div class="siryou">

        <label>          
          <tr>
            <th>情報<br>
              <span>任意（複数回答可）</span>
            </th> 
        </label>
            <td>
              <div>                
                <input id="check01_01" type="checkbox" >
                <label for="check01_01">ホームページ</label>
              </div>
              <div>                
                <input id="check01_02" type="checkbox" >
                <label for="check01_02">広告</label>
              </div>

ーCSS表記ー
input[value="お問い合わせ"]:checked ~ data-contents .siryou{
visibility: visible;
height: auto;

}

お忙しい中申し訳御座いませんがご教授頂けると助かります。。。

宜しくお願い致します。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。質問は編集できます。

Answer 1

data-contentsというセレクタは、<data-contents>という非標準のタグを指すことになります。.data-contentsではないでしょうか。

Comments

[maisumakun]

もっとも、こういったフォーム制御をCSSで行うこと自体、フォームの配置への制約になってしまうなど、あまり適任ではありません。JavaScriptを使ったほうがいいでしょう。

[chocon]

maisumakun様
迅速にお助け頂き誠に有難う御座います。
記載ミスしていたので訂正いたしましたが
どうしても何もラジオボタンに入力していなくても「情報」のチェックボックスが表示されてしまいます。

HTMLとCSSでのみ作成できる新人であり
原因がわからず・・・

[maisumakun]

> どうしても何もラジオボタンに入力していなくても「情報」のチェックボックスが表示されてしまいます。

「消す」設定をどこでもしていないからではないでしょうか？

[chocon]

消す・・・「display none」などを「.siryou」に対して行うのでしょうか？

Answer 2

提示のHTMLではCSSだけでは無理です。
ラジオボタンと、非表示の要素が兄弟関係、親子関係になっている必要がありますので。

HTMLを変更可能なら、下記のような感じになります。

<div>
  <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ">
  <label for="i_qtype01">お問い合わせ</label><br>
  <input id="i_qtype02" type="radio" name="qtype" value="資料請求">
  <label for="i_qtype02">資料請求</label>
  <div class="data-contents">
    <div class="siryou">
      <label>
        <tr>
          <th>情報<br>
            <span>任意（複数回答可）</span>
          </th>
      </label>

      <div>
        <input id="check01_01" type="checkbox">
        <label for="check01_01">ホームページ</label>
      </div>
      <div>
        <input id="check01_02" type="checkbox">
        <label for="check01_02">広告</label>
      </div>
    </div>
  </div>
</div>

.data-contents .siryou {
  display: none;
}
input[value="お問い合わせ"]:checked ~ .data-contents .siryou{
  display: block;
}

Comments

[chocon]

hatena19様
ご丁寧に有難う御座います。
おかげさまでご教授頂きましたhtmlとCSSで
ラジオボタンと非表示の要素が兄弟・親子関係で見直すと
対応することができました。

もしご迷惑でなければもう１つ教えて頂きたいのですが
これが次は「資料請求」をラジオボタンで選択した場合のみ
お問い合わせ内容を<textarea>で表示したい場合は
同じ
<div class="data-contents">
<div class="siryou"> に
<div>
<label>お問い合わせ内容（必須）</label>
<textarea></textarea>
</div>
で表記し
CSSにて
input[value="資料請求"]:checked ~ .data-contents .siryou{
display: block;
}

で良いのでしょうか？

[hatena19]

とりあえずやってみてうまくいかない場合に、記述したコードを提示してどのようにうまくいかないのか質問してください。

[chocon]

ご丁寧に有難う御座いました。
エラーなくコーディングすることができました。

すごくわかりやすくて勉強になりました。
お時間を有難う御座いました。