ラジオボタンが既にクリックされたときに自動的に色を追加する方法？

johnerick cuizon：

これは私の現在のSVGチャートです。

これは、ラジオボタンが自動的に黒で塗りつぶされますボックスをクリックすると、私が欲しいです。

これは、箱のための私のSVGコードです

<svg class="teeth" id="svg" 
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />

<input type="radio" name="browser" value="Y" id="answer">


    </g>

</svg>

ラジオボタンが既にクリックされたときに、誰も助けにはどのようにカラーのブラックボックスによって、必要事項を記入することはできますか？

mwilson：

あなたは、まず、更新することをSVGの要素を取得する必要があります。あなたのケースでは、それはあなたのすべての後のように見えるpolygonsおよびrect要素。

あなたはそれを持っていたら、使用することができるfill要素を着色する性質を。

const radioButton = document.getElementById('answer');
radioButton.addEventListener('change', e => {
  if (e.target.value === 'Y') {
    const polygons = document.querySelectorAll('svg polygon, svg rect');
    polygons.forEach(p => p.setAttribute('fill', 'red') );
  }
});

<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>
<input type="radio" name="browser" value="Y" id="answer">

コメントで述べたように、あなたはSVGのご入力要素の外に配置する必要があります。あなたが中心にそれをしたい場合は、実現するためにいくつかの絶対配置を行う必要があるでしょう。

また、あなたが使用してJavaScriptをせずにこれを行うことができ:checkedセレクタを。しかし、あなたがこれを行う場合、あなたは移動する必要がありますinput（あなたがSCSSを使用している場合を除き、あなたはセレクタを変更することができます）あなたのSVGの上の要素を。

例：

input:checked + svg rect,
input:checked + svg polygon {
  fill: red;
}

<input type="radio" name="browser" value="Y" id="answer">

<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>