如何獲取模態引導的值複選框

如何從輸入複選框獲取值到模態引導？如何獲取模態引導的值複選框

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Get Values of Selected Checboxes</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function(){ 
      var favorite = []; 
      $.each($("input[name='sport']:checked"), function(){    
       favorite.push($(this).val()); 
      }); 
      alert("My favourite sports are: " + favorite.join(", ")); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <form> 
     <h3>Select your favorite sports:</h3> 
     <label><input type="checkbox" value="football" name="sport"> Football</label> 
     <label><input type="checkbox" value="baseball" name="sport"> Baseball</label> 
     <label><input type="checkbox" value="cricket" name="sport"> Cricket</label> 
     <label><input type="checkbox" value="boxing" name="sport"> Boxing</label> 
     <label><input type="checkbox" value="racing" name="sport"> Racing</label> 
     <label><input type="checkbox" value="swimming" name="sport"> Swimming</label> 
     <br> 
     <button type="button">Get Values</button> 
    </form> 
</body> 
</html>

如何將警報更改爲模態引導？ Source Code

來源

2016-05-11 Muhammad Rizky Adjarriawan

請更新您的問題與相關的代碼段。 –

使用Modal event

$(document).ready(function() { 
    $("button").click(function() { 
    var favorite = []; 
    $.each($("input[name='sport']:checked"), function() { 
     favorite.push($(this).val()); 
    }); 
    $('#myModal').modal('show').on('shown.bs.modal', function() { 
     $("#checkid").html("My favourite sports are: " + favorite.join(", ")); 
    }); 
    }); 
});

HTML模式

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p id="checkid"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

Fiddle

來源

2016-05-11 19:05:16 Shehary

您可以輕鬆地通過使用下面的東西添加到自舉模式的身體：

modal.find('.modal-body').text('Your favourite sports are: ' + nameOfVariable);

你需要收集輸入時的模式被稱爲

$("#yourModal").on('show.bs.modal', function(){ 
    var modal = $(this); 
    var favorite = []; 

    $.each($("input[name='sport']:checked"), function(){    
     favorite.push($(this).val()); 
    }); 

    var favorites = $.map(favorite, function(value){ 
     return (value); 
    }); 

    modal.find('.modal-body').text('My favourite sports are: ' + favorites.join(", ")); 
});

不要忘記添加更改按鈕信息，並添加模式（和包括引導CSS和JS庫）。

這是一個codepen，它也會引導您瀏覽HTML部分。

如果您仍然需要幫助，請查看官方Bootstrap Modal文檔。

來源

2016-05-11 19:11:54 nallenanderson

如何獲取模態引導的值複選框

回答

相關問題