ラジオボタンでラジオボタンの背景色を切り替えるにはJquery/css

Question

2つのdivタグに1と2の値を持つ2つのhtmlラジオボタンがあります。ラジオボタン1がデフォルトで選択されていて、divの背景色は石灰です。ラジオボタン2の背景色を含むdivタグはオレンジです。 divタグは、以下のcssで必要に応じて配置されます。ラジオボタン2をクリックすると、ライムに変更するdivの背景色と、オレンジ色に変更するラジオボタン1の背景色を含むdivが表示されます。ここで私が試みたことがあります.Jquery関数は今のところ疑似コードです。 divタグの背景色を切り替えるには正しいJqueryは何ですか？私はCSSを変更する必要がありますか？たぶん両方のdivを同じCSSクラスにするのでしょうか？

<style type="text/css"> 
    .... 
    .cdiv1 { 
     width:130px; 
     float:left; 
    } 
    .cdiv2 { 
     width:155px; 
     float:left; 
    } 

</style> 

<script language="javascript" type="text/javascript"> 
    $(function() { 
     if($(this).find('input[type="radio"]').is(':checked').value == 1){ 
      $(".cdiv1).css("background-color", "green"); 
     } 
     else{ 
      $(".cdiv2).css("background-color", "green"); 
    } 
    }); 
</script> 
------------------------------------------------------ 
..... 

<div id="divMain" class="divcontainer"> 
    <div id="divsrch1" class="cdiv1"> 
     <input type="radio" id="rb1" name="rbsearch" value="1" checked /> 
     <label for="searchlike" class="clblsrch1">Search like</label> 
    </div> 
    <div id="divsrch2" class="cdiv2"> 
     <input type="radio" id="rb2" name="rbsearch" value="2" />          
     <label for="searchonlyfor" class="clblsrch2">Search ony for</label> 
    </div> 
</div> 

Answer 1

純粋なCSSのソリューション

.cdiv1 { 
 
    width: 130px; 
 
    float: left; 
 
} 
 

 
.cdiv2 { 
 
    width: 155px; 
 
    float: left; 
 
} 
 

 
input[type=radio] { 
 
    display: none; 
 
} 
 

 
input[type=radio]+label:before { 
 
    height: 12px; 
 
    width: 12px; 
 
    margin-right: 2px; 
 
    content: " "; 
 
    display: inline-block; 
 
    border: 1px solid #777; 
 
    border-radius: 50%; 
 
} 
 

 
input[id=r1]+label:before, 
 
input[id=r2]+label:before { 
 
    background: orange; 
 
} 
 

 
input[id=r1]:checked+label:before, 
 
input[id=r2]:checked+label:before { 
 
    background: lime; 
 
}

<div id="divMain" class="divcontainer"> 
 
    <div id="divsrch1" class="cdiv1"> 
 
    <input type="radio" name="r" id="r1" checked><label for="r1" value="1">Search like</label> 
 
    </div> 
 
    <div id="divsrch2" class="cdiv2"> 
 
    <input type="radio" name="r" id="r2"><label for="r2" value="2">Search ony for</label> 
 
    </div> 
 
</div>

Answer 2

ユーザーがチェックボックスをオンにすると検出する必要があります。このような何かが動作します：

document.getElementById('radio-id').onchange = function() { 
    if(this.checked) { 
     document.getElementsByClassName(cdiv1).style.backgroundColor = "green"; 
    } else { 
     document.getElementsByClassName(cdiv2).style.backgroundColor = "green"; 
    } 
} 

Answer 3

あなたはchange

$('input[name="rbsearch"]').on('change',function(){ 
    if($(this)val()==1) {alert(1)} 
    else{alert(2) 
    } 
    }) 

Answer 4

を使用する必要があります私がやるように見えるこの思い付きました私が望むもの

$(document).ready(function() { 
    $('input:radio[name=rbsearch]').change(function() { 
     if (this.value == '1') { 
      $(".cdiv1").css({background:"lime"}); 
      $(".cdiv2").css({ background: "orange" }); 
     } 
     else if (this.value == '2') { 
      $(".cdiv1").css({ background: "orange" }); 
      $(".cdiv2").css({ background: "lime" }); 
     } 
    }); 
});