如何更改此 html 和脚本以使用 6 个不同的按钮与 6 个无线电和 1 个按钮


How to change this html and script to work with 6 different buttons vs 6 radio & 1 button

我正在重新设计页面,我为用户可以选择的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 提供的文档是必需的。