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语句，你应该得到你所需要的