如何使用modal获得多值复选框
如何使用modal获得多值复选框
提问于 2019-05-09 19:56:03
单击提交时如何显示我的模式？
在没有模式的情况下，输出是成功的，但是如果我使用模式弹出窗口，它什么也不显示。
这是我的正文html
<form action="" method="post">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="hobby[]" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby[]" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby[]" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby[]" value="Memancing"> Memancing <br>
</div>
</div>
<div class="row">
<div class="offset-5 col-sm-7">
<input type="submit" name="proses" class="btn btn-primary" value="Proses" data-toggle="modal" data-target="#exampleModal">
</div>
</div>
</form>这是我的模式展示：
<!-- AWAL MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<h3>OUTPUT : </h3>
<?php
if (isset($_POST['proses'])) :
if (!empty($_POST['hobby'])) :
foreach ($_POST['hobby'] as $selected) :
echo $selected . "</br>";
endforeach;
endif;
endif;
?>
</div>
</div>
</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>
<!-- AKHIR MODAL -->我的模式就是不提交信息
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-09 21:05:42
好的，如您所愿，以下是显示这些值的模式：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal1" 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">×</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>
<form>
<h3>Please select:</h3>
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="values" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="values" value="Membaca"> Membaca <br>
<input type="checkbox" name="values" value="Menulis"> Menulis <br>
<input type="checkbox" name="values" value="Memancing"> Memancing <br>
</div>
</div>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" >modal</button>
</body>
</html>
<script>
$(document).ready(function(){
$("#button1").click(function() {
var p=$("#myModal1 #checkid");
$(p).html("you have selected:");
$.each($("input[name='values']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56058893
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号