ホームページ > バックエンド開発 > PHPチュートリアル > ラジオを取得して属性を選択するjsメソッド

ラジオを取得して属性を選択するjsメソッド

WBOY
リリース: 2016-07-25 09:12:42
オリジナル
1474 人が閲覧しました

以下の目的を持った連携メニューを実装します。 1. 「匿名グループ」をクリックすると、自動的に次のページに移動します: メンバータイプ「プライベートグループ」、アクセス制御「グループメンバー」 2. [パブリック グループ] をクリックすると、自動的に次のページに移動します: メンバー タイプ [実名グループ] 以下に示すように: js radio与select属性 ​ まず、jqueryライブラリを使用してラジオをクリックするイベントを取得します。イベントを取得した後、どのラジオにチェックが入っているかを判断して連携変換を行います。 発生した問題には、IE および Firefox のイベントとの互換性、および select でのオプションの selected 属性の設定が含まれます。

IE および Firefox と互換性があり、var ie=document.all;var nn6=document.getElementById&&!document.all; を使用します。 select でオプションの selected 属性を設定するには、 var t=document.getElementsByName("select1")[0][1]; を使用します。 selected 属性を設定する場合、通常 document.getElementsByName("select1").options が使用されますが、Firefox では未定義と報告されます。そこで、走査後、配列を使用してそれを解決しました。

目標 1 を達成する完全なコードの例:

  1. name グループ (名前を使用)
  2. 匿名グループ (ニックネームを使用)
  3. パブリック グループ
  4. プライベートグループ
  5. var ie=document.all;
  6. var nn6=document.getElementById&&!document.all;
  7. $(document).ready(function(){
  8. $(":radio").click(function(e){
  9. var $ name=(nn6?e.target.name:event.srcElement.name);
  10. if($name == "メンバータイプ")
  11. {
  12. if(1 == GetRadioValue($name))
  13. {
  14. SetRadioCheck ("検索タイプ",1);
  15. var t=document.getElementsByName("select1")[0][1];
  16. t.setAttribute("selected","selected");
  17. }
  18. }
  19. });
  20. });
  21. コードをコピー
  22. 目標 2 を達成したときに、SetRadioCheck の setAttribute が機能しないことに遭遇しました。理由が分からなかったので、obj
  23. .checked = true; を変更しました。 関数1と2のjsを実装する

// JavaScript ドキュメント var ie=document.all;

var nn6=document.getElementById&&!document.all;
$(document).ready(function(){
/*「匿名グループ」をクリックします、自動ジャンプ: メンバー タイプ "プライベート グループ"、アクセス制御 "グループ メンバー"*/
    $(":radio").click(function(e){
  1. var $name=(nn6?e.target.name: events .srcElement.name);
  2. if($name == "member_type")
  3. {
  4. if(1 == GetRadioValue($name))
  5. SetRadioCheck("search_type",1);
  6. var t=document. ("select1")[0][1];
  7. t.setAttribute("selected","selected");
  8. }
  9. }
  10. /*「パブリック グループ」をクリックすると、メンバー タイプ「実名グループ」に自動的に移動します" */
  11. if($name == "search_type")
  12. {
  13. if(1 == GetRadioValue($name))
  14. {
  15. SetRadioCheck("member_type",0);
  16. }
  17. }
  18. });
  19. } ) ;
  20. /*チェックされたラジオの値を取得します
  21. *RadioName: ラジオの値を取得するラジオ グループの名前
  22. */
  23. function GetRadioValue(RadioName){
  24. var obj=document.getElementsByName(RadioName) ;
  25. if(obj!=null){
  26. var i;
  27. for(i=0;iif(obj[i].checked){
  28. return obj[i].value;
  29. }
  30. }
  31. }
  32. return null;
  33. }
  34. /*選択した属性を設定します
  35. *RadioName: 属性ラジオ グループの名前を変更します
  36. *i: ラジオ内の i 番目の要素が選択されます
  37. */
  38. function SetRadioCheck(RadioName,i){
  39. var obj;
  40. obj=document.getElementsByName(RadioName)
  41. //obj[i].setAttribute("checked","checked"); ;
  42. }
  43. コードをコピー

SetRadioCheck への 2 回目の呼び出し用

  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") が無効です。アドバイスをお願いします。
コードをコピー


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート