Question

我有一个简单的表单，在选择发布选项时会显示额外的选项。然而，我真正想要它做的只是当从以前非常相似的单选按钮组合做出选择的组合时才显示这些选项。所以总共有3套单选按钮。 1.英国或国外发布，2.支付卡，账户或现金，3。发布选项，您可以在下面看到。只有在客户选择Uk作为目的地且支付是（卡或账户）且需要发布时，才应显示额外的隐藏发布选项。

<style type="text/css">
    .show { display: block;  }
    .hide { display: none; }
</style>

<script type="text/javascript">
    function showSelect() {
        var select = document.getElementById('my_select');
        select.className = 'show';
    }
</script>


<div id="post">
    <fieldset class="post" > 
        <legend>
            <span class="wrap3">&nbsp;Please choose method of delivery &nbsp;&nbsp;</span>
        </legend> 

        <ul class="radio"> 
            <li>
                <input type="radio" name="Postage_Method" id="post"  value="Post"  onclick="showSelect();"/>
                <label for="post">&nbsp;Please Post</label>
            </li> 

            <select id="my_select" class="hide">
                <option value="nxday">Next Day Monday to Friday </option>
                <option value="b9">Before 9 a.m. Monday to Friday </option>
                <option value="b10">Before 10 a.m. Monday to Friday </option>
                <option value="b12">Before 12 a.m. Monday to Friday </option>
                <option value="sat9">Saturday Before 9 a.m.  </option>
                <option value="sat10">Saturday Before 10 a.m. </option>
            </select>


            <li>
                <input type="radio" name="Postage_Method" id="post" value="Arrange Own Pick Up " />
                <label for="own">&nbsp;Will arrange own pick up</label>
            </li> 

            <li>
                <input type="radio" name="Postage_Method" id="post" value="Collect in person" />
                <label for="collect">&nbsp;Will collect in person</label>
            </li> 
        </ul> 
    </fieldset> 
</div>

Answer 1

我想你想要类似的东西：Demo

还有一个类似的问题here

我修改你的代码而不是使用onclick，使用onchage

<强>更新您是否尝试使用复选框？我使用复选框对您的代码进行了修改。希望这是你要求的组合。 Demo2

希望它对你有所帮助。

条件组合显示/隐藏多个单选按钮

1 个答案: