JavaScript - 如果选中单选按钮，则更改背景颜色

Question

我对 JavaScript 还很陌生，我想在学习 jQuery 之前先了解一些，所以这里没有 jQuery 的选择。

我有一个可以写文章的表单，并且我已经将所有内容都启动并运行并且运行得很好。图像选择器本身可以工作，但它是我想要修复的外观，这样我就不必查看图像下丑陋的单选按钮，因此单选按钮将被删除，而不是那样，图像的背景变成红色或其他一些明显的颜色。

显示图像的代码是这样的，它可以工作，除了onlclick:

$dir = 'img/uploads/';

$images = glob($dir.'*.jpg');

$numPics = count($images) / 2 - 1;

for($i = 0; $i<=$numPics; $i++){

    if(strpos($images[$i], 'large')){

?>

<td>

    <label for="selectImage<?=$i; ?>">
        <img src="<?=$images[$i];?>" alt="<?=$images[$i]; ?>" width="250" id="imageLabel<?=$i; ?>">
    </label>

    <input type="radio" name="img" value="<?=$images[$i]; ?>" role="button" id="selectImage<?=$i; ?>" onclick="changeBackground('imageLabel<?=$i; ?>', 'selectImage<?=$i; ?>')">

</td>
<?php

    if($i == 3){

        echo "</tr>";

    }

   }

}

JavaScript 是这样的:

function changeBackground(id, id2){

    if(document.getElementById(id2).checked == true;) {

        document.getElementById(id).style.backgroundColor = 'red';

    }

}

我想要的是，当我检查单选按钮时，图像上的背景图像会改变颜色，当我检查其他图像时，它应该改变该图像的背景颜色。知道我该怎么做吗？单选按钮将有一个显示:无；这样做没有问题。

感谢任何帮助。

Answer 1

实际上，您需要零 JavaScript 才能做到这一点。

input[type="radio"] {
    display: none;  
}
input[type="radio"] + label {
    background-color: yellow;  
}

input[type="radio"]:checked + label {
    background-color: lime;  
}

<input type="radio" name="r" id="r1"><label for="r1">One</label>
<input type="radio" name="r" id="r2"><label for="r2">Two</label>
<input type="radio" name="r" id="r3"><label for="r3">Three</label>
<input type="radio" name="r" id="r4"><label for="r4">Four</label>

对于您的问题，如果您在开发人员工具中打开 JavaScript 控制台，您会看到一条错误消息 Uncaught SyntaxError: Unexpected token ; 或类似的内容，该消息将指向随机放置的分号if 语句。代码的下一个问题是，当取消选中复选框时，您不会将颜色切换回来，因此如果用户选择不同的选项，它仍然是绿色的。