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

應該這樣做：

function changeBackground(id, id2){

  if(document.getElementById(id2).checked) {

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

  }
}

您的狀況中有分號，這會破壞整個過程。

Answer 2

實際上，您需要使用ZERO 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語句中隨機放置的分號。 代碼的下一個問題是，當未選中該復選框時，您不會將顏色切換回原來的顏色，因此，如果用戶選擇其他選項，則該選項仍將為綠色。