首页 > 网站 > WEB开发 > 正文

jquery实现点击radio,当选中‘其它’时,显示后面输入框;否则隐藏

2024-04-27 15:00:52
字体:
来源:转载
供稿:网友

有时候会遇到这么一个很简单的功能:

jquery实现点击radio,当选中‘其它’时,显示后面输入框;否则隐藏

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以下低版本不支持。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表