html代码:
<div>
<input type="radio" name="rd" class="same" value='选项二' >选项一
<input type="radio" name="rd" class="same" value='选项二'>选项二
<input type="radio" name="rd" class="same others" value='其它'>其它
<input type="text" name="txt" class="txt" value=""/>
</div>
jquery代码:
$(function(){
$(".same").click(function(){
$(this).siblings().attr("checked",false);
$(this).attr("checked",true);
if($(this).attr("class").indexOf('others')>=0){
$(this).siblings('.txt').show();
}
else{
$(".others").siblings('.txt').hide();
}
});
})
注释: if语句也可以使用if($(this).hasClass("others"))进行判断
实现效果如下:
看了网友的回复,确实css解决是最简单的,代码如下:
.others ~ input[type='text'] {
display:none;
}
.others:checked ~ input[type='text'] {
display:inline;
}
注:但是但是IE9以下低版本不支持。
如果您有更好的解决办法请留言交流,谢谢!
如果您觉得本文对您的学习有所帮助,请多支持与鼓励。