时间戳

首页 > 解决方案 > 如何：单选按钮更改图像的不透明度

javascript - 如何：单选按钮更改图像的不透明度

问题描述

选择单选按钮时，我正在尝试使用 javascript 点亮图像。

我用 forEach 函数尝试了它，但是使用给定的代码，所有图像都变为不透明度 1；

此外，当我刷新我的页面时，单选按钮仍处于选中状态。

let img = document.querySelectorAll('.poll_img');
    let radio = document.querySelectorAll('.radio_button');

    radio.forEach(radioButton => {
        if (radioButton.checked = true){
            img.forEach(image => {
                image.style.opacity = 1;
            })
        }
    })
<form class="poll_form" action="">
  <div class="poll_bar">
    <img class="poll_img poll_img1" src="assets/images/poll_bar-icon.svg" alt="">
    <label class="radio_title" for="radio1">Atlantic Forest, South America
    </label><input class="radio_button" type="radio" name="group1" id="radio1">
    <div class="check"></div>
  </div>

  <div class="poll_bar">
    <img class="poll_img  poll_img2" src="assets/images/poll_bar-icon.svg" alt="">

    <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
    </label><input class="radio_button" type="radio" name="group1" id="radio2">
    <div class="check"></div>
  </div>
</form>

标签： javascripthtmlcss

解决方案

在 JS=中是用于分配，而不是比较。你需要使用==.

条件（您的 JS 代码中的第 5 行）应该是

if (radioButton.checked == true) {...

要不就

if (radioButton.checked)

推荐阅读