选中时如何更改单选按钮中的背景颜色？

Question

当有人选择它时，我试图更改单选按钮的背景。 我读了很多其他的书，并试图用我的代码做类似的事情，但没有成功。

这是我的 HTML 和 CSS 代码。 我需要使用 javascript 来实现这一点吗？

https://codepen.io/levskyy/pen/xxZWVqg

 #frm_radio_10-0 input { display: none; } #frm_radio_10-0 { font-family: 'Oswald', sans-serif; color:#fff; font-size:23px; border-style:solid; border-color: #262626; border-radius:25px; width:50%; text-align:center; margin:auto; padding-bottom:10px; background-color:#000; margin-bottom:10px; } #frm_radio_10-0:hover { background-color:red; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; } #frm_radio_10-0 input:checked { background-color:blue; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; }

 <div class="frm_radio" id="frm_radio_10-0"> <label for="field_r8kt5-0"> <input type="radio" name="item_meta[10]" id="field_r8kt5-0" value="1.0" data-invmsg="text invalid"> Text</label> </div>

jQuery 修复了这个问题：

<script> jQuery(document).on("change","input", function(){
if(jQuery(this).is(":checked")) 
jQuery(this).closest("label").addClass("checkedlabel");
}); 
</script>

并添加 css for.checkedlabel

Answer 1

贝娄是你的代码编辑工作，但我还要指出：

• 看起来您正在尝试做的事情（具有单个开/关选项）最好使用复选框而不是单选按钮来完成。
• 在 HTML 中， input永远不会进入label内部，而是在它旁边。
• 如果可以，您应该避免在 css 中使用 id。 最好使用类。

 #frm_radio_10-0 input { display: none; } #frm_radio_10-0 label { font-family: 'Oswald', sans-serif; color:#fff; font-size:23px; border-style:solid; border-color: #262626; border-radius:25px; width:50%; text-align:center; margin:auto; padding-bottom:10px; background-color:#000; margin-bottom:10px; display: inline-block; } #frm_radio_10-0 label:hover { background-color:red; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; } #frm_radio_10-0 input:checked+label { background-color:blue; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; }

 <div class="frm_radio" id="frm_radio_10-0"> <input type="radio" name="item_meta[10]" id="field_r8kt5-0" value="1.0" data-invmsg="text invalid"> <label for="field_r8kt5-0">Text</label>

Answer 2

您可以添加一些 javascript 来切换 html 类

<script>
document.getElementById("field_r8kt5-0").classList.toggle('frm_radio_10-0 frm_radio_10-0-checked ');
</script>

将它们更改为类

Answer 3

而不是编码 class="frm_radio" 做“无线电标签”，并在你的 CSS 中使用句点'。 而不是标签，因为 id 只能在同一页面中存储一个值。