Home  >  Article  >  Backend Development  >  js method to obtain radio and select attributes

js method to obtain radio and select attributes

WBOY
WBOYOriginal
2016-07-25 09:12:421466browse

Implement a linkage menu with the following goals: 1. Click "Anonymous Group" and automatically jump to: Member Type "Private Group", Access Control "Group Members" 2. Click "Public Group" and automatically jump to: Member type "Real-name Group" As shown below: js radio与select属性 ​ First, get the event of clicking the radio, using the jquery library. After getting the event, determine which radio it is. By judging which radio is checked, the linkage transformation is performed. The problems encountered include compatibility with IE and Firefox events, and then setting the selected attribute of options in select.

Compatible with IE and Firefox, use var ie=document.all;var nn6=document.getElementById&&!document.all; To set the selected attribute of options in select, use var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected"); When setting the selected attribute, document.getElementsByName("select1").options is usually used, but Firefox reports undefined. So after traversing, I used an array to solve it.

Example, complete code that achieves goal 1:

  1. Real name Group (use name)
  2. Anonymous group (use nickname)
  3. Public group
  4. Private group
  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. });
Copy the code

When achieving goal 2, I encountered that setAttribute in SetRadioCheck was not working. After debugging, I didn’t know why, so I changed obj.checked = true; Implement functions 1 and 2 js

  1. // JavaScript Document
  2. var ie=document.all;
  3. var nn6=document.getElementById&&!document.all;
  4. $(document).ready(function(){
  5. /*Click "Anonymous Group" , automatic jump: member type "private group", access control "group members"*/
  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. /*Click "Public Group" and automatically jump to: Member type "Real-name Group" */
  18. if($name == "search_type")
  19. {
  20. if(1 == GetRadioValue($name))
  21. {
  22. SetRadioCheck("member_type",0);
  23. }
  24. }
  25. });
  26. }) ;
  27. /*Get the value of the checked radio
  28. *RadioName: the name of the radio group to get the radio value
  29. */
  30. function GetRadioValue(RadioName){
  31. var obj;
  32. obj=document.getElementsByName(RadioName);
  33. if( obj!=null){
  34. var i;
  35. for(i=0;i
  36. if(obj[i].checked){
  37. return obj[i].value;
  38. }
  39. }
  40. }
  41. return null;
  42. }
  43. /*Set the selected attribute
  44. *RadioName: To modify the name of the attribute radio group
  45. *i: The i-th element in the radio is selected
  46. */
  47. function SetRadioCheck(RadioName,i){
  48. var obj;
  49. obj=document.getElementsByName(RadioName);
  50. //obj[i].setAttribute("checked","checked");
  51. obj[i].checked = true;
  52. }
Copy code

For the second call to 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") is invalid, please give me some advice.
Copy code


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn