Home>

I am creating an inquiry form with html and css.
Depending on the item checked with the radio button
I would like to display a check button
I can't do it well.

If I want to hide the check button if it is not selected

What should I do?

html
-Check box-








-Check box that I want to display only when you check the radio button of the inquiry-










-CSS notation-
input [value = "contact"]: checked ~ data-contents .siryou {
visibility: visible;
height: auto;

}

I'm sorry I'm busy, but I would appreciate it if you could teach me. .. ..

  • Answer # 1

    data-contentsThe selector isIt will point to the non-standard tag..data-contentsit might be.

  • Answer # 2

    In the presented HTML, CSS alone is not possible.
    Because the radio button and the hidden element must have a sibling relationship and a parent-child relationship.

    If you can change the HTML, it will look like the following.

    
    <input id = "i_qtype01" type = "radio" name = "qtype" value = "Inquiry">
    <label for = "i_qtype01">Inquiries</label><br>
    <input id = "i_qtype02" type = "radio" name = "qtype" value = "Request for information">
    <label for = "i_qtype02">Request for materials</label>
      
        
        <label>
          <tr>
            <th>Information<br>
              <span>Optional (multiple answers allowed)</span>
            </th>
        </label>
          
          <input id = "check01_01" type = "checkbox">
          <label for = "check01_01">Home page</label>
          
          
          <input id = "check01_02" type = "checkbox">
          <label for = "check01_02">Advertising</label>
          
        
      
    
    .data-contents .siryou {
      display: none;
    }
    input [value = "contact"]: checked ~ .data-contents .siryou {
      display: block;
    }