使用内部脚本的SVG单选按钮逻辑

Question

I am trying to make a radio button control using SVG. I wish to allow only one radio button to be selected a time. I am "selecting" a radio button by setting the size of it's inner-circle element to a predefined size ( 11 ). Below is the code that I thought should be able to do it. I am using classes to keep track of the control's state. Below is an example svg file.

<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>

When the fist button is pressed the code works as expected and the first button is toggled off, however after more buttons are pressed it keeps trying to toggle off the original button which results in the other buttons having the ability to be enabled. I'm guessing i'm just making a simple logical error however I've spent a while trying to track it down with no success.

Answer 1

Have you tried it in firefox? It seems to work for me using that browser....