JQuery’de Radio Button ile Arka Plan Rengi Değiştirmek

JQuery’de Radio Button ile Arka Plan Rengi Değiştirmek
JQuery’de Radio Button ile Arka Plan Rengi Değiştirmek
Yazılım Kodu Kanalına Abone Olun

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.

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

Aşağıdaki yazıları da inceleyebilirsiniz...

Sitedeki yazıları kopyalamak yasaktır.