0

我正在重新设计页面，我为用户可以选择的 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>
4

1 回答 1

0

这可以使用每个按钮一个监听器来处理，或者通过将工作委托给单个祖先元素来处理。在这种情况下，在表单上放置一个单击侦听器可能是最简单的。当它被调用时，您可以使用关联的事件对象来查看它的来源并做出相应的反应。

请注意，当按名称获取表单控件时，如果只有一个控件具有该名称，则仅返回一个元素。如果两个或更多控件具有该名称，则返回具有该名称的元素的 HTMLCollection。

侦听器可以是：

<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';
      }
  }
}

每次在表单中的任意位置单击时脚本都会运行，因此即使单击了重置按钮，也会始终显示正确的文本。

if..else 可以替换为：

      document.getElementById(button.value).style.display = button.checked? '' : 'none';

但较长的版本可能更清晰。

哦，去掉脚本元素中的 CDATA 定界符，它们仅对作为 XML 服务的文档是必需的。

于 2012-05-07T23:56:43.437 回答