在 font awesome 将单选按钮更改为 svg 元素后检测选中的事件

Question

Font-Awesome 5 支持 svg，但它将我的 radiobutton 更改为 svg 元素，因此我不知道如何获取 onchange 事件。在 DOM 中，如果您检查单选按钮，它看起来像 <svg ... > 而不是 <input ... >

HTML

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

<input id="radio1" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio2" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio3" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio4" type="radio" name="radio" class='fas fa-star fa-2x' >

CSS

.svg-inline--fa 
{
  color : red;
}


.svg-inline--fa:hover
{
  color : blue;
}

.svg-inline--fa:checked
{
  color : yellow; /* does not work */
}

http://jsfiddle.net/patrickinminneapolis/45pLwrvz/44/

Answer 1

我建议您为图标和单选输入使用单独的元素。

<label class="radio" for="rating1">
   <i class='fas fa-star'></i>
   <input type="radio" value=1 name="rating" id='rating1' style='display: none;'>
</label>

输入可能在视觉上被隐藏了，但是点击包含图标的标签，就像点击输入一样

在 font awesome 将单选按钮更改为 svg 元素后检测选中的事件

Detect checked event after fontawesome changes radiobutton into svg element

font-awesome-5