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