JQuery’de Radio Button ile Arka Plan Rengi Değiştirmek
![JQuery’de Radio Button ile Arka Plan Rengi Değiştirmek](https://yazilimkodu.com/wp-content/uploads/2022/02/jqueryde-radio-button-ile-arka-plan-rengi-degistirmek.png)
![Yazılım Kodu Kanalına Abone Olun](https://yazilimkodu.com/wp-content/uploads/2022/03/yazilim-kodu-youtube-kanali.jpg)
Herkese merhaba,
Bu yazıda radio button ile arka plan rengi değiştirmek hakkında bilgi vereceğim.
Aşağıdaki kod yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery'de Arka Plan Rengi Değiştirmek</title>
</head>
<body>
<h1>Arka Plan Rengi Değiştir</h1>
<div class="form-check">
<input class="form-check-input" type="radio" name="renkler" value="kirmizi" id="kirmizi" checked >
<label class="form-check-label" for="kirmizi">
Kırmızı
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="renkler" value="turuncu" id="turuncu">
<label class="form-check-label" for="turuncu">
Turuncu
</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="renkler" value="yesil" id="yesil" >
<label class="form-check-label" for="yesil">
Yeşil
</label>
</div>
</body>
</html>
JQUERY Kodu
$(document).ready(function() {
var renk = $("input[type='radio'][name='renkler']:checked").val();
if (renk=="kirmizi"){
$("body").css("background-color","red");
}else if(renk=="turuncu"){
$("body").css("background-color","orange")
}else {
$("body").css("background-color","green")
}
});
$("input[name='renkler']").change(function() {
var renkdegeri = this.value;
if (renkdegeri=="kirmizi"){
$("body").css("background-color","red");
}else if(renkdegeri=="turuncu"){
$("body").css("background-color","orange")
}else {
$("body").css("background-color","green")
}
});
[codepen_embed height=300 theme_id=1 slug_hash=’gOXWyvP’ user=’yavuzselimkart’ default_tab=’html’ animations=’run’][/codepen_embed]
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.