Как динамически создать переключатель с помощью jQuery?

#javascript #jquery

Вопрос:

Я разрабатываю небольшое приложение, в котором я хочу создать 20 переключателей в одном ряду.

Как я могу это сделать с помощью jQuery?

Ответ №1:

Я думаю, это послужит вашей цели:

 for (i = 0; i < 20; i  ) {
    var radioBtn = $('<input type="radio" name="rbtnCount" />');
    radioBtn.appendTo('#target');
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

Ответ №2:

Вы можете сделать это с помощью appendTo() в цикле for:

 for (i = 0; i < 20; i  ) {
    $('<input type="radio" name="dynradio" />').appendTo('.your_container');
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="your_container"></div>

Ответ №3:

Что-то вроде:

 for (i = 0; i < 20; i  ) {
    $('#element').append('<input type="radio" name="radio_name" />');
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

Ответ №4:

 for (i = 0; i < 20; i  ) {
    $('<input type="radio" name="radiobtn" >Yourtext' i '</input>').appendTo('#container');
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Ответ №5:

Этот код добавит переключатели с уникальным идентификатором к каждой из них….

 for (var i=0;i<=20;i  )
{
 $("#yourcontainer").append("<input type='radio' id='myRadio" i "'>")
}

Ответ №6:

Вам нужно найти элемент, который должен содержать ваши переключатели и append() их:

 var container = $('#radio_container');
for (var i = 0; i < 20; i  ) {
    container.append('<input type="radio" name="radio_group" value="'   i   '">');
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radio_container">Choose one: </div>

Таким образом, вы выполняете поиск контейнера только один раз (в отличие от других ответов) и присваиваете значение каждому переключателю, которое позволяет вам определить выбор.

Ответ №7:

Предполагая, что у вас есть div с идентификатором =myDivContainer, попробуйте следующее:

 for (i=0;i<=20;i  )
{
$("#myDivContainer").append('<input type="radio" />')
}

Ответ №8:

 for (var i=0;i<=20;i  )
  {
  $("#yourcontainer").append("<input type='radio' name='myRadio' />");
  }