Heim  >  Artikel  >  Backend-Entwicklung  >  js获取radio与select属性的方法

js获取radio与select属性的方法

WBOY
WBOYOriginal
2016-07-25 09:12:421445Durchsuche

实现一个联动菜单,目标: 1、点击“匿名小组”,自动跳转:成员类型“私密群”、访问控制 “群成员” 2、点击“公开群”, 自动跳转:成员类型“实名小组” 如下图: js radio与select属性    首先,获得点击radio的事件,用的是jquery库,获得事件后判断是那个radio,通过判断是那个radio被checked了然后进行联动变换。 其中遇到的问题有,兼容ie和firefox的事件,然后是设置select中的中options的selected属性。

兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all; 设置select中的中options的selected属性用的是var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected"); 在设置selected属性通常用的是document.getElementsByName("select1").options,但是firefox报undefined。于是遍历后就用了一个数组解决了。

例子,实现了目标1的完整代码:

  1. 实名小组(使用姓名)
  2. 匿名小组(使用昵称)
  3. 公开群
  4. 私密群
  5. // JavaScript Document
  6. var ie=document.all;
  7. var nn6=document.getElementById&&!document.all;
  8. $(document).ready(function(){
  9. $(":radio").click(function(e){
  10. var $name=(nn6?e.target.name:event.srcElement.name);
  11. if($name == "member_type")
  12. {
  13. if(1 == GetRadioValue($name))
  14. {
  15. SetRadioCheck("search_type",1);
  16. var t=document.getElementsByName("select1")[0][1];
  17. t.setAttribute("selected","selected");
  18. }
  19. }
  20. });
  21. });
复制代码

实现目标2时,遇到了SetRadioCheck中的setAttribute不好使了,调试了也不知道什么原因于是换了obj.checked = true; 实现功能1、2 js

  1. // JavaScript Document
  2. var ie=document.all;
  3. var nn6=document.getElementById&&!document.all;
  4. $(document).ready(function(){
  5. /*点击"匿名小组",自动跳转:成员类型"私密群"、访问控制 "群成员"*/
  6. $(":radio").click(function(e){
  7. var $name=(nn6?e.target.name:event.srcElement.name);
  8. if($name == "member_type")
  9. {
  10. if(1 == GetRadioValue($name))
  11. {
  12. SetRadioCheck("search_type",1);
  13. var t=document.getElementsByName("select1")[0][1];
  14. t.setAttribute("selected","selected");
  15. }
  16. }
  17. /*点击"公开群", 自动跳转:成员类型"实名小组"*/
  18. if($name == "search_type")
  19. {
  20. if(1 == GetRadioValue($name))
  21. {
  22. SetRadioCheck("member_type",0);
  23. }
  24. }
  25. });
  26. });
  27. /*获得被check的radio的值
  28. *RadioName:要获得radio值的radio组名称
  29. */
  30. function GetRadioValue(RadioName){
  31. var obj;
  32. obj=document.getElementsByName(RadioName);
  33. if(obj!=null){
  34. var i;
  35. for(i=0;iif(obj[i].checked){
  36. return obj[i].value;
  37. }
  38. }
  39. }
  40. return null;
  41. }
  42. /*设置被选中属性
  43. *RadioName:要修改属性radio组的名称
  44. *i:radio中第i个元素被选中
  45. */
  46. function SetRadioCheck(RadioName,i){
  47. var obj;
  48. obj=document.getElementsByName(RadioName);
  49. //obj[i].setAttribute("checked","checked");
  50. obj[i].checked = true;
  51. }
复制代码

对于在第二次调用SetRadioCheck

  1. if($name == "search_type")
  2. {
  3. if(1 == GetRadioValue($name))
  4. {
  5. SetRadioCheck("member_type",0);
  6. }
  7. }
  8. obj[i].setAttribute("checked","checked")的失效,还请指教。
复制代码


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn