jquery/html添加單選按鈕檢查類，否則刪除類，如果單選按鈕沒有選中？

Question

我有兩個單選按鈕，使用相同的名稱組「選擇」

HTML：

<div class="select_box_outer"> 
<span class="select_box"> 
<input type="radio" id="select" name="select" value="same"> 
<div class="checkbox_tick"></div> 
<div class="checkbox_tick2"></div> 
</span> 
</div> 


<div class="select_box_outer"> 
<span class="select_box"> 
<input type="radio" id="select" name="select" value="same"> 
<div class="checkbox_tick"></div> 
<div class="checkbox_tick2"></div> 
</span> 
</div> 

在這裏的選項是「是」或「否」

如果用戶檢查之一單選按鈕，然後我想要父div'select_box_outer'有一個類添加了'select_box_outer2'，它基本上改變了我的div背景顏色的邊框的CSS，併爲div'select_box_outer'添加了一個陰影。

然後，如果單選按鈕被取消選中，那麼它應該刪除類並返回到'select_box_outer'的原始css設置。

當沒有選中單選按鈕時，我也會顯示'checkbox_tick'，這會顯示爲灰色勾號。但如果單選按鈕被選中，那麼'checkbox_tick'css應該顯示爲none，我的div'checkbox_tick2'應該顯示爲block。但是，如果單選按鈕然後被取消選中，那麼它應該切換回'checkbox_tick'。

我很努力去處理我需要在這裏做什麼，請有人告訴我我要去哪裏錯了？在此先感謝：

JQUERY：

<script> 
jQuery(function(){ 
     jQuery("input[name=select]").change(function(){   


      if ($(this).val() === "Yes") { 
      $(this).parents('div.select_box_outer').addClass("select_box_outer2"); 
$('div.checkbox_tick').css('display', 'none'); 
      } 
      else { 
      $(this).parents('div.select_box_outer').removeClass("select_box_outer2"); 
$('div.checkbox_tick2').css('display', 'block'); 
      }                
     }); 
}); 
</script> 

CSS：

.select_box_outer{ 
    width:150px; 
    height:130px; 
    border: 1px solid #999; 
    background: #eee; 
    box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25); 
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .25); 
-webkit-border-radius: 5px; 
-moz-border-bradius: 5px; 
border-radius: 5px; 
cursor:pointer; 
cursosr:hand; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
display:inline-block; 
margin-right:50px; 
} 

.select_box_outer2 { 
    background: #FFB631; /* Or some other color */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=100); 
-moz-opacity: 1; 
-khtml-opacity: 1; 
opacity: 1; 
} 

.checkbox_tick{ 
height:55px; 
width:100%; 
background-image: url('../images/tick.png'); 
background-repeat:no-repeat; 
background-position: center; 
background-size:35px 35px; 
position:relative; 
display:none; 
margin:auto; 

} 

.checkbox_tick2{ 
height:55px; 
width:100%; 
background-image: url('../images/tick.png'); 
background-repeat:no-repeat; 
background-position: center; 
background-size:35px 35px; 
position:relative; 
margin:auto; 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
} 

Answer 1

<div class="select_box_outer"> 
<span class="select_box"> 
<input type="radio" id="select" name="select" value="same"> 
<div class="checkbox_tick"></div> 
<div class="checkbox_tick2" style="display:none;"></div> 
</span> 
</div> 


<div class="select_box_outer"> 
    <span class="select_box"> 
     <input type="radio" id="select2" name="select" value="same"> 
     <div class="checkbox_tick"></div> 
     <div class="checkbox_tick2" style="display:none;"></div> 
    </span> 
</div> 

<script src="jquery-1.10.1.min.js"></script> 

<script> 
jQuery(function(){ 

    jQuery("input[name=select]").change(function(){   

     $('.select_box_outer').removeClass("select_box_outer2"); 
     $('.checkbox_tick').css('display', 'block'); 
     $('.checkbox_tick2').css('display', 'none'); 

     $(this).parents('div.select_box_outer').addClass("select_box_outer2"); 
     $(this).siblings('div.checkbox_tick').css('display', 'none'); 
     $(this).siblings('div.checkbox_tick2').css('display', 'block'); 

    }); 
}); 
</script> 

<style> 

.select_box_outer{ 
    width:150px; 
    height:130px; 
    border: 1px solid #999; 
    background: #eee; 
    box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25); 
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .25); 
-webkit-border-radius: 5px; 
-moz-border-bradius: 5px; 
border-radius: 5px; 
cursor:pointer; 
cursosr:hand; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
display:inline-block; 
margin-right:50px; 
} 

.select_box_outer2 { 
    background: #FFB631; /* Or some other color */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=100); 
-moz-opacity: 1; 
-khtml-opacity: 1; 
opacity: 1; 
} 

.checkbox_tick{ 
height:55px; 
width:100%; 
background-image: url('../images/tick.png'); 
background-repeat:no-repeat; 
background-position: center; 
background-size:35px 35px; 
position:relative; 
display:none; 
margin:auto; 

} 

.checkbox_tick2{ 
height:55px; 
width:100%; 
background-image: url('../images/tick.png'); 
background-repeat:no-repeat; 
background-position: center; 
background-size:35px 35px; 
position:relative; 
margin:auto; 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
}  

</style>  

Answer 2

爲什麼不使用這樣的事情？

$(document).ready(function(){ 
    $("input.check").click(function(){ 
     if($(this).is(":checked")){ 
      $(this).parent().addClass("selectedclass"); 
     } 
    }); 
}); 

只需添加一個if和else語句，你應該得到你所需要的