javascript - 被选中的单选项修改样式
本文介绍了javascript - 被选中的单选项修改样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
修改被选中的单选项的样式,但是添加了样式之后修改选项样式仍然存在,即同时出现两个被选中的样式,以下是我的代码,请问各位应该如何修改?
<div class="choice">
<label>
<input type="radio" class="a" name="1"><span class="aFont">aaaaa</span>
</label>
<label>
<input type="radio" class="b" name="1"><span class="bFont">bbbbb</span>
</label>
<label>
<input type="radio" class="c" name="1"><span class="cFont">ccccc</span>
</label>
<label>
<input type="radio" class="d" name="1"><span class="dFont">ddddd</span>
</label>
</div>
<script>
$(document).ready(function(){
$(".choice input[type = 'radio']").on("click",function(){
if ($(".choice input:checked")){
$(this).siblings().css("background","red");
}
});
});
</script>
解决方案
<div class="choice">
<label>
<input type="radio" class="a" name="1"><span class="aFont">aaaaa</span>
</label>
<label>
<input type="radio" class="b" name="1"><span class="bFont">bbbbb</span>
</label>
<label>
<input type="radio" class="c" name="1"><span class="cFont">ccccc</span>
</label>
<label>
<input type="radio" class="d" name="1"><span class="dFont">ddddd</span>
</label>
</div>
<script>
$(document).ready(function(){
$(".choice input[type = 'radio']").on("click",function(){
if ($(".choice input:checked")){
$(this).parent().css("background" , "green").siblings().css("background","red");
}
});
});
</script>
你选中的 是input 不是label 注意 $(this).parent().css("background","green").siblings()
这篇关于javascript - 被选中的单选项修改样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文