Question

    $('#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中获取的，我想循环它们并将它们显示为模式中的复选框并最终获取被检查的项目。任何人都可以在这里指导我

Answer 1

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>

Answer 2

＆＃13;

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());
}

＆＃13;

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

＆＃13;

在jquery的bootstrap模式中创建动态复选框

2 个答案: