twitter-bootstrap 带单选按钮的 Bootstrap 输入对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27870042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap input dialog with radio buttons
提问by MB34
Does anyone know of a Bootstrap modal dialog plugin that allows you to put radio buttons on it and collect the values that were selected?
有谁知道一个 Bootstrap 模态对话框插件，它允许您在其上放置单选按钮并收集选择的值？
回答by MattD
You don't need anything special to do this. Your modal is part of your page, thus anything you can access on the page you can access inside the modal as well.
你不需要任何特殊的东西来做到这一点。您的模态是页面的一部分，因此您可以在页面上访问的任何内容也可以在模态内访问。
$('#myModal').modal('show');
$('input[type=radio]').click(function() {
alert($(this).val());
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>When the modal is popped, it has three radio buttons in it. When you select one, an alert fires that shows you the value of the selected radio button.
当模态弹出时，它有三个单选按钮。当您选择一个时，会触发警报，显示所选单选按钮的值。
This demonstrates that you can add whatever controls you would to any page, and access the data within them to do whatever you need to do.
这表明您可以将任何控件添加到任何页面，并访问其中的数据以执行您需要执行的任何操作。
