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

JavaScript - If radio button is checked, change background color

本文关键字：背景 颜色 单选按钮 如果 JavaScript      更新时间：2023-09-26

我对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';
    }
}

我想要的是当我选中单选按钮时，图像上的背景图像改变颜色，当我选中另一个图像时，它应该改变那个图像的背景颜色。知道我该怎么做吗?单选按钮将显示:none;这不是问题。

实际上你不需要任何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语句中随机放置的分号。代码的下一个问题是，当复选框未选中时，您没有将颜色切换回来，所以如果用户选择了不同的选项，它仍然是绿色的。

应该这样做:

function changeBackground(id, id2){
  if(document.getElementById(id2).checked) {
    document.getElementById(id).style.backgroundColor = 'red';
  }
}

你的条件中有一个分号，它打破了整个条件

相关文章：