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")
}
});1
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
32 Kez Okundu
