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>

此处的选项为“是”或“否”

如果用户选中其中一个单选按钮，那么我希望父div“select_box_outer”有一个类添加'select_box_outer2'，它基本上改变了我的div背景颜色的css边框并为div'select_box_outer添加了一个阴影”。

然后，如果取消选中单选按钮，则应删除该类并返回“select_box_outer”的原始css设置。

当未选中单选按钮时，我也显示'checkbox_tick'，这显示为灰色勾号。但如果选中单选按钮，则'checkbox_tick'css应显示为none，我的div'check_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语句即可获得所需内容

jquery / html在单选按钮检查上添加类，否则如果未选中单选按钮则删除类？

2 个答案: