我正在尝试使用 SVG 制作单选按钮控件。我希望一次只选择一个单选按钮。我通过将其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>
当按下第一个按钮时，代码按预期工作并且第一个按钮被关闭，但是在按下更多按钮后，它会继续尝试关闭原始按钮，从而导致其他按钮能够被启用。我猜我只是犯了一个简单的逻辑错误，但是我花了一段时间试图追踪它但没有成功。