Javascript 我带复选框的星级为'；行不通

我已经完成了所有客户端的星级评定。但这里有个问题。当我单击星星时，背景位置不会改变。看，我得到的复选框背景图像只有一个轮廓星和四个金星。我希望复选框在选中时将其背景更改为第一颗星（金色）。我希望你能理解：

var-onestar=document.getElementById（“一颗星”）；
var twostar=document.getElementById（“twostar”）；
var threestar=document.getElementById（“三星”）；
var fourstar=document.getElementById（“四星”）；
var fivestar=document.getElementById（“五星”）；
var onechecked=document.getElementById（“一颗星”）.checked=true；
如果（onestar.checked=true）{
this.classList.toggle=“solid”；
}

标签{
保证金：0；
}
.星号支票{
-webkit外观：无！重要；
-moz外观：无！重要；
-o型外观：无！重要；
-ms外观：无！重要；
外观：无！重要；
宽度：24px；
高度：24px；
背景图像：url（'https://www.worthschools.net/userfiles/197/my%20files/4-stars.jpg？id=29736’；
背景尺寸：封面；
背景重复：无重复；
背景位置：右0；
光标：指针；
}
.固体{
背景位置：左0；
}

您对该产品的评价是多少？

您将尝试使用JavaScript实现这一点。但是你有错误。您的id选择器无效，因此出现错误，并且未进行正确的检查。要执行您想要执行的操作，需要JavaScript事件处理程序

如何只使用CSS就可以做到这一点

标签{
保证金：0；
}
.star container{
显示器：flex；
弯曲方向：行反向；
调整项目：灵活启动；
证明内容：柔性端；
}
.星号支票{
-webkit外观：无！重要；
-moz外观：无！重要；
-o型外观：无！重要；
-ms外观：无！重要；
外观：无！重要；
宽度：24px；
高度：24px；
背景图像：url（'https://www.worthschools.net/userfiles/197/my%20files/4-stars.jpg？id=29736’；
背景尺寸：封面；
背景重复：无重复；
背景位置：右0；
光标：指针；
大纲：0；
}
.星号检查：已选中，.星号检查：已选中~输入{
背景位置：左0；
}

您对该产品的评价是多少？

看看控制台“UncaughtTypeError:无法将属性'checked'设置为null”，`是表示找不到元素的错误

id=“星号检查一颗星”

是id。。。。。没有意义为什么id有一个空格。删除星号检查

onestar.checked=true

Ids不能有空间。。。我相信是的。。。在这个代码中的其他东西中…嗯。。。好啊Ima立即更改代码。“但是……一个元素不能有两个id吗？”=>否。但是您可以有多个

类

。您也可以使用

+

而不是

~

@evolutionxbox复制snipplet并尝试一下。。。。不确定相邻的兄弟姐妹会如何工作。有不止一颗星需要填补。。。你的建议可能会导致☆★★☆☆好地方。我脑子里想的是所有的单选按钮都会被检查。不知道为什么