我正在学习本教程,并设计和警报窗口(包括在线演示),
http://jquerytools.org/demos/overlay/modal-dialog.html
我可以修改源代码并在警报消息中添加单选按钮。源代码如下所示(你不必浏览整个代码。只需查看我添加单选按钮的地方和我访问单选按钮值的地方),
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<style>
.modal {
background-color:#fff;
display:none;
width:350px;
height:250px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
background:url(/media/img/global/info.png) 0 50% no-repeat;
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
</style>
</head>
<body><!-- the triggers -->
<p>
<button class="modalInput" rel="#yesno">Yes or no?</button>
<button class="modalInput" rel="#prompt">User input</button>
</p>
<!-- yes/no dialog -->
<div class="modal" id="yesno">
<h2>This is a modal dialog</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<!-- yes/no buttons -->
<p>
<button class="close"> Yes </button>
<button class="close"> No </button>
</p>
</div>
<!-- user input dialog -->
<div class="modal" id="prompt">
<h2>This is a modal dialog</h2>
<p>
You can only interact.
</p>
<!-- input form. you can press enter too -->
<form>
//Added radio buttons
<input type="radio" name="sex" value="male" id="male"> Male<br />
<input type="radio" name="sex" value="female" id="female"> Female<br />
<button type="submit">Submit</button>
</form>
<br />
</div>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
var buttons = $("#yesno button").click(function(e) {
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});
$("#prompt form").submit(function(e) {
// close the overlay
triggers.eq(1).overlay().close();
// get user input
var input = $("input", this).val(); // this input value always return 'male' as the output
// do something with the answer
triggers.eq(1).html(input);
// do not submit the form
return e.preventDefault();
});
});
</script>
</body>
</html>
此演示有两个警报窗口。我说的是具有文本输入的警报消息。在我的示例中,我删除了文本输入并添加了两个单选按钮
但当我单击"提交"按钮时,它总是返回我的"男性"作为输出
有人能帮我解决这个问题吗?我需要将radin按钮的输出转换为变量"input"
使用此选项弹出框。在HTML中保留单选按钮。
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Email this Article</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<TR><TD>
使用单选按钮。
</TD></TR>
</table>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnShowSimple").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
HideDialog(); }
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
您将文本类型输入更改为单选类型输入。所以你必须更改
var input = $("input", this).val();
有了这个
var input = $("input:checked", this).val();
perdickss为这个例子提供了一个非常好的答案。但是,如果您在页面中有多个输入,那么这将不起作用。所以你应该使用这样的东西:
var input = $("input[name=FIELD_NAME]:checked", this).val();
其中FIELD_NAME是要检查的输入的名称。在这种情况下,代码看起来像:
var input = $("input[name=sex]:checked", this).val();
正如您在代码中所写:
<form>
<input type="radio" name="sex" value="male" id="male"> Male<br />
<input type="radio" name="sex" value="female" id="female"> Female<br />
<button type="submit">Submit</button>
</form>
#prompt form
中有两个输入字段,因此当您使用以下代码获得值时:
var input = $("input", this).val();
您将始终获得第一个匹配元素的值(即male
)。
您所要做的就是使用:checked
选择器指定已检查的输入,我建议您另外添加输入的名称:
var input = $("input[name=sex]:checked", this).val();