6つの異なるボタンと6つの異なるボタンで動作するようにこのhtmlとスクリプトを変更するには

Question

私はページの再設計に取り組んでいます.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

これは、リスナー1各ボタンを使用して対処することができ、または単一の祖先要素に仕事を委譲することによって。この場合、フォーム上に単一のクリックリスナーを配置するのが最も簡単です。それが呼び出されると、関連付けられたイベントオブジェクトを使用して、それがどこから来ているかを確認し、それに応じて反応することができます。

フォームコントロールを名前で取得する場合、コントロールに1つのコントロールしかない場合は、1つの要素だけが返されることに注意してください。 2つ以上のコントロールに名前が付いている場合、その名前を持つ要素の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として提供されるドキュメントにのみ必要です。