jQueryほとんど使ったことがなかったので、前に実装でつまずいたところを書きます。
モーダル内のチェックボックスを操作した時、inputに動的に反映させて、POST出来るようにしたい
まずは、Bootstrapの雛形を取得
雛形は公式から
次に下記のようなモーダルを作成
<body>
<div class="container">
<div class="trigger mt-5">
ここにモーダルでチェックした値をいれたい
<input id="input" type="text" class="form-control" value="" placeholder="選択して下さい" disabled>
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:150px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="1" type="checkbox" name="checkbox" />
1
<input id="2" type="checkbox" name="checkbox" />
2
<input id="3" type="checkbox" name="checkbox" />
3
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
scrptタグを抜粋
<script type="text/javascript">
$(function() {
// クリックでモーダルオープン
$('.trigger').on('click', function() {
$('#modal').modal('show');
});
array = [];
change_input_value(array);
// チェックボックスをチェックしたら発動
$('input[type="checkbox"]').click(function() {
// チェックされているか配列で管理
$number = $(this).val();
array[$number] = 1;
// チェックが外されたら配列のその値を削除
if ($(this)[0].checked == false) {
delete array[$number];
}
// 配列のkeyを渡す
change_input_value(Object.keys(array));
});
// inputタグのvalueを変更
function change_input_value(array) {
input_values = $('#input');
input_values.val(array);
}
});
</script>
最終的な動き
以上です。
次こそReactの何かを書きたい。