Блог

Главная - Вопросы по программированию - Добавление группы переключателей в форму при установленном флажке

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

#jquery #html #twitter-bootstrap #radio-button

#jquery #HTML #twitter-bootstrap #переключатель

Вопрос:

У меня есть форма с группой, скажем, из 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 amp;nbsp amp;nbsp</span>
                        <input value="1" type="radio" id="btnTop1" name="btnTop1"  onclick="uncheckBottom()" />
                        <span> 1 amp;nbsp amp;nbsp</span>
                        <input value="2" type="radio" id="btnTop2" name="btnTop2"  onclick="uncheckBottom()"  />
                        <span> 2 amp;nbsp amp;nbsp</span>
                        <input value="3" type="radio" id="btnTop3" name="btnTop3"   onclick="uncheckBottom()" />
                        <span> 3 amp;nbsp amp;nbsp</span>
                    </form>
                </div>

        </body>
        </html>

Ответ №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>  amp;nbsp amp;nbsp</span>
    <input value="1" type="radio" id="btnTop1" name="btnTop1" onclick="uncheckBottom()" />
    <span> 1 amp;nbsp amp;nbsp</span>
    <input value="2" type="radio" id="btnTop2" name="btnTop2" onclick="uncheckBottom()" />
    <span> 2 amp;nbsp amp;nbsp</span>
    <input value="3" type="radio" id="btnTop3" name="btnTop3" onclick="uncheckBottom()" />
    <span> 3 amp;nbsp amp;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 amp;nbsp amp;nbsp</span>
    <input value="1" type="radio" id="btnTop1" name="btnTop5" onclick="uncheckBottom()" />
    <span> 5 amp;nbsp amp;nbsp</span>
    <input value="2" type="radio" id="btnTop2" name="btnTop6" onclick="uncheckBottom()" />
    <span> 6 amp;nbsp amp;nbsp</span>
    <input value="3" type="radio" id="btnTop3" name="btnTop7" onclick="uncheckBottom()" />
    <span> 7 amp;nbsp amp;nbsp</span>
  </form>
</div>

Комментарии:

1. Ах да, конечно! Большое спасибо. Я сделал это немного по-другому: один основной div содержит одну форму, а внутри формы два div, но по сути я последовал вашему примеру.