JSラジオボタン、チェックボックス、ドロップダウンメニューをDOMを使用して設定する方法

この記事では、JSによるDOMを使用して、ラジオボタン、チェックボックス、ドロップダウンメニューを設定する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

1.ラジオボタンを設定します

ラジオボタンは、<入力型= "Radio" />の形式です。ユーザーが選択できるオブジェクトのセットですが、一度に選択できるオブジェクトは1つだけです。それぞれに属性がチェックされており、1つがそれを選択すると、他の属性が偽りになります。

最初に例を投稿しましょう：

次のようにコードをコピーします。<script type = "text/javascript">

関数getChoice（）{

var oform = document.forms ["uform1"];

var achoices = oform.camera;

for（i = 0; i <achoices.length; i ++）//単一のオプションテーブル全体を転送

if（achoices [i] .Checked）//選択したアイテムが見つかった場合は終了します

壊す;

alert（ "カメラブランドは：" + achoices [i] .value）;

}

関数setChoice（inum）{

var oform = document.forms ["uform1"];

oform.camera [inum] .checked = true;

}

</script>

<form method = "post" name = "uform1" action = "addinfo.aspx">

カメラブランド：

<p>

<入力タイプ= "Radio" name = "Camera" id = "Canon" value = "Canon">

<ラベル= "Canon"> Canon </label>

</p>

<p>

<input type = "radio" name = "camera" id = "nikon" value = "nikon">

<ラベル= "nikon"> nikon </label>

</p>

<p>

<入力タイプ= "Radio" name = "camera" id = "sony" value = "sony" checked>

<ラベル= "sony"> sony </label>

</p>

<p>

<入力タイプ= "Radio" name = "Camera" id = "Olympus" value = "Olympus">

<ラベル= "Olympus"> Olympus </label>

</p>

<p>

<入力タイプ= "Radio" name = "camera" id = "samsung" value = "samsung">

<ラベル= "samsung"> samsung </label>

</p>

<p>

<入力タイプ= "Radio" name = "camera" id = "pentax" value = "pentax">

<label for = "pentax"> pentax </label>

</p>

<p>

<入力型= "Radio" name = "camera" id = "others" value = "others">

<ラベル= "others">その他</label>

</p>

<p>

<入力型= "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">

</p>

<p>

<入力型= "button" value = "選択されたオブジェクトを検出" onclick = "getChoice（）;">

<入力型= "button" value = "canon" onclick = "setChoice（0）;">

</p>

</form>

ラジオボタンは、<入力型= "Radio" />の形式です。ユーザーが選択できるオブジェクトのセットですが、一度に選択できるオブジェクトは1つだけです。それぞれに属性がチェックされており、1つがそれを選択すると、他の属性が偽りになります。

上記のコードから、IDと名前は異なることがわかり、その名前はラジオボタンのセットで同じであり、1つだけが選択されていることがわかります。 IDは<label>または他のオプションにバインドされています。

コードの中で、選択したオブジェクトをチェックするコードは（特定のアイテムのchcked値がtureである場合、トラバーサルエンドです）

コードコピーは次のとおりです。varoform = document.forms ["uform1"];

var achoices = oform.camera;

for（i = 0; i <achoices.length; i ++）//単一のオプションテーブル全体を転送

if（achoices [i] .Checked）//選択したアイテムが見つかった場合は終了します

壊す;

alert（ "カメラブランドは：" + achoices [i] .value）;

2.複数の選択ボックスを設定します

ラジオボタンとは異なり、チェックボックス<入力タイプ= "チェックボックス" />は、処理のために同時に選択できます。メールボックス内の各電子メールの前のチェックボックスは典型的な使用です。

次のようにコードをコピーします。<script type = "text/javascript">

function checkbox（）{

var str = document.getElementsbyname（ "趣味"）;

var objarray = str.length;

var Chestr = "";

for（j = 0; j <objarray; j ++）{

if（str [j] .checked == true）{

Chestr + = str [j] .value + "、";

}

}

if（chestr == ""）{

アラート（「趣味を最初に選択してください〜！」）;

} それ以外 {

アラート（ "最初の選択：" + chestr）;

}

}

function changeboxes（action）{

var oform = document.forms ["myform1"];

var ocheckbox = oform.hobby;

for（var i = 0; i <ocheckbox.length; i ++）//各オプションを転送

if（action <0）//逆選択

ocheckbox [i] .checked =！oCheckbox [i] .Checked;

else //アクションが1の場合、すべてを選択し、0の場合はすべてを選択します

ocheckbox [i] .checked = action;

}

</script>

<form method = "post" name = "myform1" action = "addinfo.aspx">

あなたがやりたいこと：

<p>

<入力タイプ= "チェックボックス" name = "趣味" id = "ball" value = "ball">

<ラベル= "ball">バスケットボールのプレイ</label>

</p>

<p>

<入力型= "チェックボックス" name = "趣味" id = "tv" value = "tv">

<label for = "TV"> TVを見る</label>

</p>

<p>

<入力型= "チェックボックス" name = "bobby" id = "net" value = "net">

<ラベル= "net">インターネット上の</label>

</p>

<p>

<入力タイプ= "チェックボックス" name = "趣味" id = "book" value = "book">

<ラベル= "book">読書</label>

</p>

<p>

<入力タイプ= "チェックボックス" name = "bobby" id = "trip" value = "trip">

<ラベル= "Triv"> Travel </label>

</p>

<p>

<入力型= "チェックボックス" name = "趣味" id = "music" value = "music">

<ラベル= "Music"> Music </label>

</p>

<p>

<入力タイプ= "チェックボックス" name = "bobby" id = "others" value = "others">

<ラベル= "others">その他</label>

</p>

<p>

<入力型= "button" value = "all" onclick = "changeboxes（1）;" />

<入力型= "ボタン"値= "onclick =" changeboxes（0）; " />

<入力型= "button" value = "anti-select" onclick = "ChangeBoxes（-1）;" />

<入力型= "button" value = "" onclick = "checkbox（）" />

</p>

</form>

チェックボックスの原則は、チェックされた属性ブール値を使用して決定されます。すべてを選択すると、不完全な選択は、0と1の形でパラメーターを渡すことができます。

3。プルダウンメニュー

ドロップダウンメニュー<select>は、一般的に使用されるフォーム要素です。プルダウンがラジオ選択可能である場合、ラジオボタン<入力タイプ= "Radio" />の関数は、ラジオ選択可能なボタンの関数と同じです。倍数= "倍数"が複数の選択可能である場合、関数はチェックボックスに相当しますが、占有されている領域はチェックボックスよりもはるかに小さいです。

ドロップダウンメニューの一般的な特性：

①。メニューを下げて、シングル選択値を取得します

次のようにコードをコピーします：<スクリプト言語= "javascript">

function checksingle（）{

var oform = document.forms ["myform1"];

var oselectbox = oform.constellation;

var ichoice = oselectbox.selectedIndex; //選択したアイテムを取得します

Alert（ "You Celected" + oselectbox.options [ichoice] .text）;

}

</script>

<form method = "post" name = "myform1">

<ラベル= "Constellation"> Zodiac Sign：</label>

<p>

<選択id = "constellation" name = "Constellation">

<オプション値= "aries" selected = "selected"> aries </option>

<オプション値= "Taurus"> Taurus </option>

<オプション値= "gemini"> gemini </option>

<オプション値= "cancer"> cancer </option>

<オプション値= "leo"> lion </option>

<オプション値= "virgo"> virgo </option>

<オプション値= "libra"> libra </option>

<オプション値= "scorpio"> scorpio </option>

<オプション値= "sagittarius">シュノーカー</option>

<オプション値= "Capricorn"> Capricorn </option>

<オプション値= "aquarius"> aquarius </option>

<オプション値= "魚座">魚座</option>

</select>

</p>

<入力型= "ボタン" onclick = "checksingle（）" value = "view options" />

</form>

②。ドロップダウンメニューがマルチセレクトの場合、値を取得します

次のようにコードをコピーします。<script type = "text/javascript">

function checkmultiple（）{

var oform = document.forms ["myform1"];

var oselectbox = oform.constellation;

var achoices = new Array（）;

//ドロップダウンメニュー全体を移動します

for（var i = 0; i <oselectbox.options.length; i ++）

if（oselectbox.options [i] .selected）//選択した場合

achoices.push（oselectbox.options [i] .text）; //配列に押し込みます

Alert（ "You Chelected：" + Achoices.join（））; //出力結果

}

</script>

<form method = "post" name = "myform1">

<ラベル= "Constellation"> Zodiac Sign：</label>

<p>

<select id = "Constellation" name = "Constellation" multiple = "multise" style = "height：180px;">

<オプション値= "aries"> aries </option>

<オプション値= "Taurus"> Taurus </option>

<オプション値= "gemini"> gemini </option>

<オプション値= "cancer"> cancer </option>

<オプション値= "leo"> lion </option>

<オプション値= "virgo"> virgo </option>

<オプション値= "libra"> libra </option>

<オプション値= "scorpio"> scorpio </option>

<オプション値= "sagittarius">シュノーカー</option>

<オプション値= "Capricorn"> Capricorn </option>

<オプション値= "aquarius"> aquarius </option>

<オプション値= "魚座">魚座</option>

</select>

</p>

<入力型= "ボタン" onclick = "checkmultiple（）" value = "view options" />

</form>

③。一般的な価値（シングルと複数の選択肢を引き下げるもの）

次のようにコードをコピーします：<スクリプト言語= "javascript">

関数getSelectValue（box）{

var oform = document.forms ["myform1"];

var oselectbox = oform.elements [box]; //対応する選択ドロップダウンメニューは、パラメーターに従って選択されます

if（oselectbox.type == "select-1"）{//単一の選択肢か複数の選択かどうかを判断します

var ichoice = oselectbox.selectedIndex; //選択したアイテムを取得します

alert（ "single-select、selected" + oselectbox.options [ichoice] .text）;

} それ以外 {

var achoices = new Array（）;

//ドロップダウンメニュー全体を移動します

for（var i = 0; i <oselectbox.options.length; i ++）

if（oselectbox.options [i] .selected）//選択した場合

achoices.push（oselectbox.options [i] .text）; //配列に押し込みます

alert（ "複数選択、選択しました：" + achoices.join（））; //出力結果

}

}

</script>

<form method = "post" name = "myform1">

星座：

<p>

<select id = "Constellation1" name = "Constellation1">

<オプション値= "aries" selected = "selected"> aries </option>

<オプション値= "Taurus"> Taurus </option>

<オプション値= "gemini"> gemini </option>

<オプション値= "cancer"> cancer </option>

<オプション値= "leo"> lion </option>

<オプション値= "virgo"> virgo </option>

<オプション値= "libra"> libra </option>

<オプション値= "scorpio"> scorpio </option>

<オプション値= "sagittarius">シュノーカー</option>

<オプション値= "Capricorn"> Capricorn </option>

<オプション値= "aquarius"> aquarius </option>

<オプション値= "魚座">魚座</option>

</select>

<入力型= "ボタン" onclick = "getSelectValue（ 'Constellation1'）" value = "View options" />

</p>

<p>

<select id = "constellation2" name = "constellation2" multiple = "multise" style = "height：120px;">

<オプション値= "aries"> aries </option>

<オプション値= "Taurus"> Taurus </option>

<オプション値= "gemini"> gemini </option>

<オプション値= "cancer"> cancer </option>

<オプション値= "leo"> lion </option>

<オプション値= "virgo"> virgo </option>

<オプション値= "libra"> libra </option>

<オプション値= "scorpio"> scorpio </option>

<オプション値= "sagittarius">シュノーカー</option>

<オプション値= "Capricorn"> Capricorn </option>

<オプション値= "aquarius"> aquarius </option>

<オプション値= "魚座">魚座</option>

</select>

<入力型= "button" onclick = "getSelectValue（ 'Constellation2'）" value = "View options" />

</p>

</form>

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。