1

SVGを使用してラジオボタンコントロールを作成しようとしています。一度に1つのラジオボタンのみを選択できるようにしたい。inner-circle要素のサイズを事前定義されたサイズ( )に設定して、ラジオボタンを「選択」しています11。以下は私がそれを行うことができるはずだと思ったコードです。コントロールの状態を追跡するためにクラスを使用しています。以下はsvgファイルの例です。

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="300"
   height="400"
   id="radio">
    <script type="application/ecmascript"><![CDATA[
      var innerCircleExpandedSize = 11;
      function ResponseOptionClicked(evt) {
          console.log('Response option clicked');
          // Remove circle in enabled element
          var enabledElem = document.getElementsByClassName('enabled')[0];
          console.debug(enabledElem);
          if (enabledElem != undefined) {
              console.log('Removing a inner circle');
              enabledElem.getElementsByClassName('response-innercircle')[0].setAttribute('r', 0);
              enabledElem.className.baseVal = enabledElem.className.baseVal.replace('enabled', 'disabled');
              console.log('Removed the inner circle');
          }

          // Add circle in radio button
          console.log('Adding a inner circle');
          evt.currentTarget.getElementsByClassName('response-innercircle')[0].setAttribute('r', innerCircleExpandedSize);
          evt.currentTarget.className.baseVal = evt.currentTarget.className.baseVal.replace('disabled', 'enabled');
          console.log('Added the inner circle');
      }
  ]]></script>    
    <g id="base">
            <g class="response-option disabled" transform="translate(50,150)" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
                <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
                <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
                <text x="40"  y="6.5" class="response-text" fill="blue" font-size="1.5em">Rarely</text>
            </g>
            <g class="response-option disabled" transform="translate(50,200)" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
                <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
                <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
                <text x="40"  y="6.5" class="response-text" fill="blue" font-size="1.5em">Sometimes</text>
            </g>
            <g class="response-option disabled" transform="translate(50,250)" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
                <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
                <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
                <text x="40"  y="6.5" class="response-text" fill="blue" font-size="1.5em">Often</text>
            </g>
            <g class="response-option disabled" transform="translate(50,300)" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
                <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
                <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
                <text x="40"  y="6.5" class="response-text" fill="blue" font-size="1.5em">Always</text>
            </g>
    </g>
</svg>

最初のボタンを押すと、コードは期待どおりに機能し、最初のボタンがオフになりますが、さらにボタンを押すと、元のボタンをオフに切り替えようとし続けるため、他のボタンを有効にすることができます。単純な論理エラーを作っているだけだと思いますが、それを追跡しようとしてしばらく時間がかかりましたが、成功しませんでした。

4

1 に答える 1

1

Firefoxで試しましたか?そのブラウザを使用している私にとってはうまくいくようです。

于 2012-08-22T19:28:58.230 に答える