我正在重新设计页面,我为用户可以选择的6个选项添加了6个不同的按钮,而不是6个单选框和1个按钮。我只需要调整代码以确保在下一页上,根据按下的按钮显示正确的总数和文本。
我只需要下一页上的一些文本根据按下的按钮进行更改。
这是最初存在的内容:
<input id="diamondmonthly" class="radio" type="radio" value="diamondmonthly" name="membership">
<input id="diamondyearly" class="radio" type="radio" checked="checked" value="diamondyearly" name="membership">
<input id="c4" class="radio" type="radio" value="c4" name="membership">
<input id="c3" class="radio" type="radio" value="c3" name="membership">
<input id="c2" class="radio" type="radio" value="c2" name="membership">
<input id="c1" class="radio" type="radio" value="c1" name="membership">
<a id="btnSave" class="xlarge button-submit" onclick="$j('#btnSave').attr('disabled', 'disabled');qc.recordControlModification('btnSave', 'Enabled', '0'); qc.pB('MembershipForm', 'btnSave', 'QClickEvent', '');" href="#">
<script>
//<![CDATA[
qc.registerForm(); qc.imageAssets = "http://images.comfiles.com/assets/images"; qc.cssAssets = "http://images.comfiles.com/assets/css"; qc.phpAssets = "/assets/php"; qc.jsAssets = "http://images.comfiles.com/assets/js"; qc.regCA(new Array("btnSave","btnSave2","c1","c2","c3","c4","diamondyearly","diamondmonthly")); jQuery(document).ready(function($j){if($j.isFunction($j().tooltip)){$j("#MembershipForm :input[data-error]").tooltip({ position: "center right", tipClass: "error_tooltip", offset: [0, -4] })}});
//]]>
</script>
这可以使用每个按钮一个侦听器来处理,或者通过将工作委托给单个祖先元素来处理。在这种情况下,最简单的方法是在窗体上放置一个单击侦听器。调用它时,可以使用关联的事件对象来查看它的来源并做出相应的反应。
请注意,按名称获取窗体控件时,如果只有一个控件具有该名称,则仅返回单个元素。如果两个或多个控件具有该名称,则返回具有该名称的元素的 HTML 查询。
侦听器可以是这样的:
<form onclick="handleClick(this)" ...>
还有侦听器(未经测试,但你应该能够从这里开始(:
function handleClick(form) {
var button, buttons = form['membership'];
// Now show text depending on which membership button is checked
for (var i=0, iLen=buttons.length, i<iLen; i++) {
button = buttons[i];
// Assuming that the text element to display has an ID
// matching the value of the checked button
if (button.checked) {
document.getElementById(button.value).style.display = '';
} else {
document.getElementById(button.value).style.display = 'none';
}
}
}
每次单击表单中的任意位置时,脚本都会运行,因此即使单击重置按钮,也将始终显示正确的文本。
如果..否则可以替换为:
document.getElementById(button.value).style.display = button.checked? '' : 'none';
但更长的版本可能更清晰。
哦,去掉脚本元素中的 CDATA 分隔符,它们只对作为 XML 提供的文档是必需的。