标签：doc 单选框 方法 charset 下拉 code his 代码 select
在项目中会存在大量这样的需求：
1.选择不同的radio单选框,页面上的部分内容随之显示隐藏
2.选择不同的option下拉框内容，页面上的部分内容随之显示隐藏
如果每次遇到这类需求都单独写方法，不光费时间，还会让我们的代码显得异常冗余，因此我们写个通用方法！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style> .commonCss{ height: 100px; line-height: 100px; text-align: center; border: 1px solid red; } </style> </head> <body> <div class="commonCss div1 initHide">div1</div> <div class="commonCss div2 initHide">div2</div> <div class="commonCss div3 initHide">div3</div> <div> <form action=""> <div> <label>radio1</label> <input type="radio" name="radio" data-show-class=".div1" data-hide-class=".initHide"> <label>radio2</label> <input type="radio" name="radio" data-show-class=".div2" data-hide-class=".initHide"> <label>radio3</label> <input type="radio" name="radio" data-show-class=".div3" data-hide-class=".initHide"> </div> <div> <select> <option value="">请选择</option> <option value="1" data-show-class=".div1" data-hide-class=".initHide">option1</option> <option value="2" data-show-class=".div2" data-hide-class=".initHide">option2</option> <option value="3" data-show-class=".div3" data-hide-class=".initHide">option3</option> </select> </div> </form> </div> <script> var myFunction = { initRadio : function(){ $(‘input:radio‘).on(‘change‘,function(){ var $showClass = $(this).data(‘showClass‘); var $hideClass = $(this).data(‘hideClass‘); $($hideClass).hide(); $($showClass).show(); }) }, initSelect : function(){ $(‘select‘).on(‘change‘,function(){ var $target = $(this).find(‘option:selected‘); var $showClass = $target.data(‘showClass‘); var $hideClass = $target.data(‘hideClass‘); $($hideClass).hide(); $($showClass).show(); }) } }; myFunction.initRadio(); myFunction.initSelect(); </script> </body> </html>
标签：doc 单选框 方法 charset 下拉 code his 代码 select
原文地址：http://www.cnblogs.com/web-MrShi/p/6115319.html
