JavaScriptを使用してラジオボタンの選択状態を取得する方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-12-06 09:07:36

オリジナル

9115 人が閲覧しました

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を使用してラジオボタンの選択状態を取得する方法