создание динамического флажка внутри модального загрузчика из jquery - PullRequest
Новая
       12

создание динамического флажка внутри модального загрузчика из jquery

0 голосов
/ 28 мая 2018 
    $('#myModal').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          var recipient = button.data('whatever')
          var version = button.data('latestversion')
          var versionarray = version.split("_")
        var n = $( "input:checked" ).length;
          var radio=$("input[name='radiogroup']:checked").val()
                var favorite = [];
            $.each($("input[name='radiogroup']:checked"), function() {
              favorite.push($(this).val());
             $('input:checkbox').removeAttr('checked');
            })  var modal = $(this)
          modal.find('.modal-title').text(recipient)
          modal.find('.modal-body input').val(favorite)
          modal.find(".modal-body #software").val( recipient );
        })

// У меня есть сценарий, например, при нажатии кнопки, я выскакиваю модальное сообщение, что у меня есть определенные элементы в списке, который выбирается в jquery, и я хочу их зациклить и отобразить их как флажок.внутри модального и, наконец, получить предметы, которые проверены. Может кто-нибудь, пожалуйста, направьте меня сюда

Ответы [ 2 ]

0 голосов
/ 29 мая 2018 

function openModal(){
    $('#my-modal').modal();
}  

function closeModal(){
    $('#my-modal').modal('hide');
} 

 var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
    var assetList = $('#assetNameMenu')
    $.each(countries, function(i, country)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);
        
        
      
       var aaa = $('<a>')
            .addClass('ui-all')
            .appendTo(li);
      
      var input = $('<input/>')
            .addClass('ui-all')
            .attr('type', 'checkbox')
            .val(country)
            .appendTo(aaa);
             
      
      var aaaa = $('<span>')
            .text(country)
            .appendTo(aaa);

    });

function Submit(){
    $('#my-modal').modal('hide');
 var selectedval=[];
 $(':checkbox:checked').each(function(i){
        selectedval.push($(this).val());
       });
  console.log(selectedval);
  $('#selectedCountry').html(selectedval.join());
} 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Large Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" onclick="openModal()">Open Large Modal</button>
  <div id="selectedCountry"></div>
  <!-- Modal -->
  <div class="modal fade" id="my-modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" onclick="closeModal()">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
         <ul id="assetNameMenu">
</ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info btn-lg" onclick="Submit()">Submit</button>
          <button type="button" class="btn btn-default" onclick="closeModal()" >Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
0 голосов
/ 28 мая 2018 

function openModal(){
    $('#my-modal').modal();
}  

function closeModal(){
    $('#my-modal').modal('hide');
} 

 var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
    var assetList = $('#assetNameMenu')
    $.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);
        
        
      
       var aaa = $('<a>')
            .addClass('ui-all')
            .appendTo(li);
      
      var input = $('<input/>')
            .addClass('ui-all')
            .attr('type', 'checkbox')
            .appendTo(aaa);
             
      
      var aaaa = $('<span>')
            .text(countries[i])
            .appendTo(aaa);

    });
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Large Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" onclick="openModal()">Open Large Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="my-modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" onclick="closeModal()">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
         <ul id="assetNameMenu">
</ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onclick="closeModal()" >Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
...