如何更改此html和腳本以使用6個不同的按鈕與6個單選和1個按鈕一起使用

Question

我正在重新設計頁面，並且為用戶可以選擇的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>

Answer 1

這可以通過使用每個按鈕一個監聽器來解決，也可以通過將工作委托給單個祖先元素來解決。 在這種情況下，將最簡單的單擊偵聽器放在表單上可能是最簡單的。 調用它時，您可以使用關聯的事件對象查看它的來源並做出相應的反應。

請注意，按名稱獲取表單控件時，如果只有單個控件具有該名稱，則僅返回單個元素。 如果兩個或多個控件具有名稱，則返回具有該名稱的元素的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';

但較長的版本可能更清晰。

哦，並且擺脫了script元素中的CDATA分隔符，它們僅對於充當XML的文檔是必需的。