検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用してラジオボタンの選択状態を取得する方法

JavaScriptを使用してラジオボタンの選択状態を取得する方法

不言
不言オリジナル
2018-12-05 14:28:529157ブラウズ

JavaScript を使用してラジオ ボタンの状態を選択するには、ラジオ ボタン オブジェクトの selected 属性を選択する必要があります。この記事では、JavaScript を使用してラジオ ボタンの選択状態を取得する方法を紹介します。 。

JavaScriptを使用してラジオボタンの選択状態を取得する方法

#まずチェックされた属性の値を見てみましょう

true: ラジオ ボタンを選択してください


false: ラジオボタンが選択されていません

フォームでラジオボタンを取得する場合指定された状況id 属性


JavaScript で id フォーム コントロールを参照する場合

document.forms.(参照表格的id).(参照控件的id)

ラジオ ボタンの選択状態を id

document.forms.(参照表格的id).(参照JavaScriptを使用してラジオボタンの選択状態を取得する方法的id).checked
## で参照する場合# アクセスすることもできます

document.(参照表格的name).(参照JavaScriptを使用してラジオボタンの選択状態を取得する方法的id).checked

name 属性で指定した場合

テキスト ボックスとチェック ボックスのコントロールは名前から取得できますが、ラジオ ボタンのコントロールは、同じラジオ ボタン グループに設定されている場合、Name の値が同じであるため、Get from Name は使用できません。先ほど紹介したIDから選択状況を確認していきます。


コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" language="javascript">
    function onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;
      target = document.getElementById("output");
      if (check1 == true) {
        target.innerHTML = "元素1被选中。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "元素2被选中。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "元素3被选中。<br/>";
      }
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" />
      <label for="Radio1">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" />
      <label for="Radio2">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" />
      <label for="Radio3">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素3</label><br />
  </form>
  <div id="output"></div>
</body>
</html>

説明: 


  <script type="text/javascript" language="javascript">
    function onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;
      target = document.getElementById("output");
      if (check1 == true) {
        target.innerHTML = "元素1被选中。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "元素2被选中。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "元素3被选中。<br/>";
      }
    }
  </script>

上記はラジオボタンが選択状態のときに実行されるJavaScriptコードです。変化します。 selected 属性を使用すると、ラジオ ボタンの選択状態を取得できます。ラジオボタンがチェックされている場合は true、チェックされていない場合は false。属性がチェックされていること、およびメッセージが「output」ID を持つ要素の HTML として表示されていることを確認してください。 

 <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">单选项目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">单选项目2</label><br />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

上記はフォーム部分のHTMLです。フォームには 2 つのチェックボックスと 1 つのボタンがあります。ボタンの onclick イベントで onBVuttonCLick() 関数を実行します。

実行結果

上記の HTML ファイルを実行します。以下のような効果が表示されます。


#ラジオ ボタンをクリックして選択します。選択すると、要素が選択されたことを示すメッセージがラジオ ボタンの下部に表示されます。

JavaScriptを使用してラジオボタンの選択状態を取得する方法

GetElementByIdを使用する場合

JavaScriptを使用してラジオボタンの選択状態を取得する方法

DOMを使用すると、GetElemenByIdでラジオボタンの選択状態を取得できます。 GetElementById, フォーム内にラジオボタンが存在しない場合でもラジオボタンを取得できます。

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" language="javascript">
    function onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change() {
      radiobtn1 = document.getElementById("Radio1");
      radiobtn2 = document.getElementById("Radio2");
      radiobtn3 = document.getElementById("Radio3");

      target = document.getElementById("output");

      if (radiobtn1.checked == true) {
        target.innerHTML = "元素1被选中。<br/>";
      }
      else if (radiobtn2.checked == true) {
        target.innerHTML = "元素2被选中。<br/>";
      }
      else if (radiobtn3.checked == true) {
        target.innerHTML = "元素3被选中。<br/>";
      }
    }
  </script>

</head>
<body>
  <input id="Radio1" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" /><label for="Radio1">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素1</label><br/>
  <input id="Radio2" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" /><label for="Radio2">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素2</label><br />
  <input id="Radio3" name="RadioGroup1" type="radio" onchange="onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change();" /><label for="Radio3">JavaScriptを使用してラジオボタンの選択状態を取得する方法 元素3</label><br />
  <div id="output"></div>
</body>
</html>

手順:

ラジオ ボタンがクリックされて選択状態が変更されると、onJavaScriptを使用してラジオボタンの選択状態を取得する方法Change() 関数が呼び出されます。関数内で GetElementById メソッドを呼び出し、ラジオ 1、ラジオ 2、ラジオ 3 のラジオ ボタン オブジェクトを取得します。選択状態は、ラジオ ボタン オブジェクトの selected プロパティの値によって決まります。ラジオボタンの選択状態に応じたメッセージがページに表示されます。

実行結果

Web ブラウザを使用して上記の HTML ファイルを実行します。以下のような効果が表示されます。

#ラジオ ボタンをクリックして選択します。選択すると、選択したメッセージが表示されます。

JavaScriptを使用してラジオボタンの選択状態を取得する方法

#ラジオボタンの選択を変更すると、それに応じてメッセージの内容も変わります。

以上がJavaScriptを使用してラジオボタンの選択状態を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：angularjsとは何ですか次の記事：angularjsとは何ですか

関連記事

続きを見る