jquery / html 在单选按钮选中时添加 class，如果单选按钮未选中，则删除 class？

Question

我有两个单选按钮，同名组 'select'

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>

这里的选项是'Yes'或者'No'

如果用户选中其中一个单选按钮，那么我希望父 div 'select_box_outer' 添加一个 class 'select_box_outer2'，这基本上改变了 css 我的 div 背景颜色的边框和添加阴影到 div 'select_box_outer'.

然后，如果单选按钮被取消选中，那么它应该删除 class 并返回 'select_box_outer' 的原始 css 设置。

当未选中单选按钮时，我也会显示 'checkbox_tick'，这显示为灰色勾号。但是如果选中单选按钮，则 'checkbox_tick' css 应该显示 none 而我的 div 'checkbox_tick2' 应该显示为块。但是，如果单选按钮随后被取消选中，那么它应该切换回 '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

为什么不用这样的东西？

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

jquery / html 在单选按钮选中时添加 class，如果单选按钮未选中，则删除 class？

jquery / html add class on radio button check, else remove class if radio button not checked?

jquery

html

css

radio-button