Question

我有一组带有四个单选按钮的表单。我想选中其他位置的复选框时，在表单中在现有按钮的下方再添加一行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>

Answer 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>

选中复选框后，在表单上添加单选按钮组

1 个答案: