javascript实现选中复选框后相关输入框变灰不可用的方法
内容摘要
本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法。分享给大家供大家参考。具体如下:
在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,
在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,
文章正文
本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法。分享给大家供大家参考。具体如下:
在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,不可用,看上去会专业一些,也是提升用户体验的一种方式。
运行效果如下图所示:
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>选中复选框,相关类变灰</title> <script language= "JavaScript" > <!-- function selectKind(the){ var obj = the; var container = document.getElementById( "kind_" + obj.name); for ( var i=0;i<container.getElementsByTagName( "input" ).length;i++) { container.getElementsByTagName( "input" )[i].disabled = obj.checked; } } //--> </script> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" ></head> <body> <input type= 'checkbox' value= "2" name=aa onclick= "selectKind(this)" >我从事游戏编程 <div id= "kind_aa" > <input type= 'checkbox' value= "php" name=aa>PHP <input type= 'checkbox' value= "asp.net" name=aa>ASP.NET <input type= 'checkbox' value= "java" name=aa>JAVA </div> <input type= 'checkbox' value= "1" name=bb onclick= "selectKind(this)" >平时不上网 <div id= "kind_bb" > <input type= 'checkbox' value= "baidu.com" name=bb>baidu.com <input type= 'checkbox' value= "163.com" name=bb>163.com <input type= 'checkbox' value= "phpstudy.net" name=bb>phpstudy.net </div> </body> </html> |
希望本文所述对大家的javascript程序设计有所帮助。
代码注释