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

我想使用SVG制作一个单选按钮控件。我希望一次只允许选择一个单选按钮。我通过将其元素的大小设置为预定义大小（11）来“选择”单选按钮。以下是我认为应该能够做到的代码。我正在使用类来跟踪控件的状态。以下是一个示例svg文件。使用内部脚本的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>

当拳头按下按钮，代码工作预期，第一个按钮切换关闭，但之后按下多个按钮它不停地尝试切换掉原有的按钮，这导致其他按钮具有能力启用。我猜测我只是做了一个简单的逻辑错误，但我花了一段时间试图追踪它没有成功。

来源

2012-08-22 secretformula

你在firefox中试过吗？它似乎为我使用该浏览器....

来源

2012-08-22 19:28:58 Scottingham

在Opera中也能正常工作。我发现它在铬中无法正常工作，所以也许你应该提交一个webkit的bug报告。 –

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

回答

相关问题