モーダルブートストラップで値チェックボックスを取得する方法

入力チェックボックスからモーダルブートストラップに値を取得するにはどうすればよいですか？モーダルブートストラップで値チェックボックスを取得する方法

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

あなたは簡単に以下を使用して、ブートストラップモーダルの身体に物事を追加することができます。

をモーダルを変更]ボタン情報を追加し、モーダルを追加（およびブートストラップCSSやJSライブラリを含む）にすることを忘れないでください

$("#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(", ")); 
});

と呼ばれたとき

あなたが入力を収集する必要があります。

ここにはcodepenがあります。この部分はHTML部分も表示されます。

まだヘルプが必要な場合は、Bootstrap Modalのドキュメントをチェックしてください。

出典

2016-05-11 19:11:54 nallenanderson

モーダルブートストラップで値チェックボックスを取得する方法

答えて

関連する問題