选中复选框时在表单上添加一组单选按钮答案

【问题标题】：Adding group of radio buttons on a form when a check box is checked选中复选框时在表单上添加一组单选按钮
【发布时间】：2019-09-07 15:54:45
【问题描述】：

我有一组表格，比如说 4 个单选按钮。我希望在选中其他地方的复选框时，在我的表单中在我现有的单选按钮下方再添加一行 4 个单选按钮。请问如何做到这一点？如果我从一开始就从 8 开始，最初隐藏底部的 4，然后使用复选框显示/隐藏它们（如果可能的话），它同样有效。谢谢！

<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>        
            </head>
            <body>
            <div id="addMore">
            <label>
            <input type="checkbox" id="myCheckBox">
            <span> Add buttons 4,5,6,7</span>
            </label>
            </div>
            <hr>
                <div id="base-1">
                    Select value
                    <form name="group_A" style="margin-top:5px">
                        <input value="0" type="radio" id="btnTop0" name="btnTop0"  onclick="uncheckBottom()" checked />
                        <span> 0 &nbsp &nbsp</span>
                        <input value="1" type="radio" id="btnTop1" name="btnTop1"  onclick="uncheckBottom()" />
                        <span> 1 &nbsp &nbsp</span>
                        <input value="2" type="radio" id="btnTop2" name="btnTop2"  onclick="uncheckBottom()"  />
                        <span> 2 &nbsp &nbsp</span>
                        <input value="3" type="radio" id="btnTop3" name="btnTop3"   onclick="uncheckBottom()" />
                        <span> 3 &nbsp &nbsp</span>
                    </form>
                </div>

        </body>
        </html>

【问题讨论】：

标签： jquery html twitter-bootstrap radio-button

【解决方案1】：

function uncheckBottom() {
    // your code
  }

$(document).ready(function() {
  $("#myCheckBox").on("click", function() {
    $("#base-2").toggle($(this).is(":checked"));
  });

  $("#base-2").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addMore">
  <label>
            <input type="checkbox" id="myCheckBox">
            <span> Add buttons 4,5,6,7</span>
            </label>
</div>
<hr>
<div id="base-1">
  Select value
  <form name="group_A" style="margin-top:5px">
    <input value="0" type="radio" id="btnTop0" name="btnTop0" onclick="uncheckBottom()" checked />
    <span>  &nbsp &nbsp</span>
    <input value="1" type="radio" id="btnTop1" name="btnTop1" onclick="uncheckBottom()" />
    <span> 1 &nbsp &nbsp</span>
    <input value="2" type="radio" id="btnTop2" name="btnTop2" onclick="uncheckBottom()" />
    <span> 2 &nbsp &nbsp</span>
    <input value="3" type="radio" id="btnTop3" name="btnTop3" onclick="uncheckBottom()" />
    <span> 3 &nbsp &nbsp</span>
  </form>
</div>
<div id="base-2">
  Select value
  <form name="group_A" style="margin-top:5px">
    <input value="0" type="radio" id="btnTop0" name="btnTop4" onclick="uncheckBottom()" checked />
    <span> 4 &nbsp &nbsp</span>
    <input value="1" type="radio" id="btnTop1" name="btnTop5" onclick="uncheckBottom()" />
    <span> 5 &nbsp &nbsp</span>
    <input value="2" type="radio" id="btnTop2" name="btnTop6" onclick="uncheckBottom()" />
    <span> 6 &nbsp &nbsp</span>
    <input value="3" type="radio" id="btnTop3" name="btnTop7" onclick="uncheckBottom()" />
    <span> 7 &nbsp &nbsp</span>
  </form>
</div>

【讨论】：

啊，当然！非常感谢。我的做法略有不同，一个主 div 包含一个表单，表单内部有两个 div，但基本上我遵循了您的示例。