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 应该不显示，我的 div 'checkbox_tick2' 应该显示为块。但如果单选按钮随后被取消选中，那么它应该切换回“checkbox_tick”。

我正在努力解决我需要在这里做的事情，请有人告诉我我哪里出错了吗？提前致谢：

查询：

<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

为什么不使用这样的东西？

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

只需添加一个 if 和 else 语句，你应该得到你需要的东西

Answer 2

<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>