使用內部腳本的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單選按鈕邏輯

回答

相關問題