首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于单选按钮,如何根据单选按钮的值列出html文档中的星星?

基于单选按钮,可以使用JavaScript来实现根据单选按钮的值列出HTML文档中的星星。以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<input type="radio" name="rating" value="1">1星
<input type="radio" name="rating" value="2">2星
<input type="radio" name="rating" value="3">3星
<input type="radio" name="rating" value="4">4星
<input type="radio" name="rating" value="5">5星

<div id="stars"></div>

JavaScript部分:

代码语言:txt
复制
const starsContainer = document.getElementById("stars");
const ratingRadios = document.getElementsByName("rating");

for (let i = 0; i < ratingRadios.length; i++) {
  ratingRadios[i].addEventListener("change", function() {
    const rating = parseInt(this.value);
    starsContainer.innerHTML = "";

    for (let j = 0; j < rating; j++) {
      const star = document.createElement("span");
      star.innerHTML = "★";
      starsContainer.appendChild(star);
    }
  });
}

上述代码中,我们首先获取了包含单选按钮和星星的容器元素starsContainer和所有的单选按钮ratingRadios。然后,我们为每个单选按钮添加了一个change事件监听器,当单选按钮的值发生改变时,会触发该事件。在事件处理函数中,我们首先获取当前选中的单选按钮的值,并将starsContainer的内容清空。然后,根据选中的值,使用循环动态创建相应数量的星星元素,并将其添加到starsContainer中。

这样,当用户选择不同的单选按钮时,就会根据选中的值列出相应数量的星星在HTML文档中。

注意:以上代码仅为示例,实际应用中可能需要根据具体需求进行适当的修改和优化。

推荐的腾讯云相关产品:无

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券