Добавление группы радиокнопок в форму при установленном флажке - PullRequest
Новая
       15

Добавление группы радиокнопок в форму при установленном флажке

0 голосов
/ 17 апреля 2019

У меня есть форма с группой, скажем, 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>

1 Ответ

1 голос
/ 17 апреля 2019 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...