JavaScript_Form の特殊効果で Radio の選択された値を取得します

原理は次のとおりです。通常、トラバーサル メソッドを使用して各無線が選択されているかどうかを判断し、選択されている場合はその値を取得します。

<form id="userlist" method="post" action="option.php">
<input type="radio" name="userid" value="1">1
<input type="radio" name="userid" value="2">2
<input type="radio" name="userid" value="3">3
</form>
<script language="javascript">
function usubmit(action){
var radionum = document.getElementById("userlist").userid;
for(var i=0;i<radionum.length;i++){
if(radionum[i].checked){
userid = radionum[i].value
}
}
window.location.href='option.php&#63;action='+action+'&userid='+userid;
}
</script>

なお、上記のフォームではid(userlist)が設定されています

ここで注意すべき点は 2 つあります。1 つは値の取得方法、もう 1 つはトラバース方法です。
document.getElementById("userlist").userid;
これは、フォームの ID に基づいてコントロール要素の名前の値を取得するメソッドです。
document.getElementsByName("userid") を使用して

を直接取得することもできます。

getElementById と getElementsByName の違い。GetElementById は、ラジオ タイプの要素を選択するときに 1 つのコントロールのみを選択します。getElementById を使用する必要がある場合は、最初にラジオ アレイ全体を取り出します。 getElementById を使用して上記のコードのようにフォーム全体の ID を取得し、その後にラジオ名

を続けます。

これで、document.getElementsByName("userid") が配列を取得することになることがわかりました。配列内の要素は、DOM ツリー内の radionum という名前を持つすべての要素です。ラジオが 1 つしかない場合でも、それは要素を 1 つだけ含む配列。
Document.all.userid は異なります。ページ内に複数のラジオがある場合、取得するラジオは配列です。オブジェクト参照。このとき得られるものは配列ではないので、配列を走査して判断することはできません。

は次のように関数化されます:

function  getRadioBoxValue(radioName) 
{ 
      var obj = document.getElementsByName(radioName); //这个是以标签的name来取控件
         for(i=0; i<obj.length;i++)  {

         if(obj[i].checked)  { 
             return  obj[i].value; 
         } 
       }     
       return "undefined";    
}

JS はラジオ

で選択された値を取得します

function Foo()
{
  var selectedIndex = -1;
  var form1 = document.getElementById("form1");
  var i = 0;
  
  for (i=0; i<form1.r.length; i++)
  {
    if (form1.r[i].checked)
    {
      selectedIndex = i;
      alert("您选择项的 value 是：" + form1.r[i].value);
      break;
    }
  }
  
  if (selectedIndex < 0)
  {
    alert("您没有选择任何项");
  }
}