我有两个单选按钮,使用相同的名称组“选择”jquery/html添加单选按钮检查类,否则删除类,如果单选按钮没有选中?
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 */
}
为什么你的标题大声冲我? – 2015-02-06 10:50:57