开发者

HTML nested radio buttons

开发者 https://www.devze.com 2022-12-16 21:06 出处:网络
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be开发者_如何学运维 another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, anothe

I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be开发者_如何学运维 another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.

How can I do this in HTML?


HTML and CSS3-only version (Fiddle):

HTML for group "D" (other groups are similar)

<div>
    <input type="radio" name="level0" value="D" id="D"/>
    <label for="D">D</label>
    <div class="sub1">
        <div>
            <input type="radio" name="level1" value="D0" id="D0"/>
            <label for="D0">D0</label>
        </div>
        <div>
            <input type="radio" name="level1" value="D1" id="D1"/>
            <label for="D1">D1</label>
            <div class="sub2">
                <div>
                    <input type="radio" name="level2" value="D10" id="D10"/>
                    <label for="D10">D1-0</label>
                </div>
                <div>
                    <input type="radio" name="level2" value="D11" id="D11"/>
                    <label for="D11">D1-1</label>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.sub1, .sub2 { display: none; }

:checked ~ .sub1, :checked ~ .sub2 {
    display: block;
    margin-left: 40px;
}


If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.

Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.

Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D


You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:

<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple

<input type="radio" id="extra1" style="visibility:hidden" other choice here />

<input type="radio" id="extra2" style="visibility:hidden" other choice here />


@guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:

<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消