單擊無線電時更改背景顏色

Question

當單擊塊內部的單選按鈕時，我試圖更改塊的背景顏色。

我這樣做，但我不明白爲什麼它不工作。 下面是代碼：

$(document).ready(function() { 
 
    $('#rad').click(function() { 
 
     $('#label').addClass('radio-active'); 
 
    }); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="radio-item" id="label"> 
 
     <input id="rad" type="radio" name="rad" > 
 
     <label class="radio-label"for="f-option">£25</label> 
 
    </li> 
 
</ul>

THX

Answer 1

正如其他人所說，這聽起來好像你可能已經忘記了包裹在CSS標籤<style>。

我把你的jQuery改寫成了香草JS--因爲它是一個你試圖實現的相對簡單的任務，爲什麼不去香草？ :-)

document.querySelector("#rad").addEventListener("change", function() { 
 
    var label = document.getElementById("label"); 
 
    label.classList.add("radio-active"); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<ul> 
 
    <li class="radio-item" id="label"> 
 
     <input id="rad" type="radio" name="rad" > 
 
     <label class="radio-label"for="f-option">£25</label> 
 
    </li> 
 
</ul>

Answer 2

將這個CSS代碼：在style標籤

.radio-active { 
    background-color: black; 
    color: white; 
} 

與像：

<style> 
.radio-active { 
    background-color: black; 
    color: white; 
} 
</style> 

Answer 3

我想你錯過了你的CSS類的<style>標籤。因爲你的代碼工作：

$(document).ready(function() { 
 
    $('#rad').click(function() { 
 
    $('#label').addClass('radio-active'); 
 
    }); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="radio-item" id="label"> 
 
    <input id="rad" type="radio" name="rad" > 
 
    <label class="radio-label"for="f-option">£25</label> 
 
</li>

Answer 4

它完美地在這裏工作......

您是否正確調用jQuery的？

<style> 
.radio-active { 
    background-color: black; 
    color: white; 
} 
</style> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#rad').click(function() { 
     $('#label').addClass('radio-active'); 
    }); 
}); 
</script> 

<ul> 


<li class="radio-item" id="label"> 
    <input id="rad" type="radio" name="rad" > 
    <label class="radio-label"for="f-option">£25</label> 
</li> 

<li class="2radio-item" id="label2"> 
    <input id="rad2" type="radio" name="rad2" > 
    <label class="radio-label2"for="f-option2">£35</label> 
</li> 

</ul> 

image uploaded