JavaScript操作フォームの例の説明（パート2）

著者：Eve Cole 更新時間：2025-07-05 03:16:01

前の記事では、JS操作フォームの説明例に関する関連知識を紹介しました（パート2）。この記事では、JavaScript操作フォームの説明の例（パート2）を紹介します。具体的な詳細は次のとおりです。

1。テキストフィールド

<入力型= "text" />

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -

テキストフィールドの値を操作します

値プロパティセットまたは取得値

2。ラジオおよびマルチセレクトボタン

<入力型= "Radio" /> <入力タイプ= "チェックボックス" />

returnを確認するか、単一選択の選択したステータスを設定します

選択されたtrue選択は選択されていません

値属性は選択された値を取得し、最初に選択した状態を決定する必要があります。

例：すべてを選択/[すべて]を選択しません/revense

1.png

1.DOM構造

<body> <form name = "myform" action = "＃" method = "post" id = "form1"> <script type = "text /javascript"> for（var i = 0; i <20; i ++）{document.write（ "<入力タイプ= 'チェックボックス' name = 'nums' />"+（i+1）+"<brite '< all "）; document.write（" <input type = 'radio' name = 'radios'> select all "）; document.write（" <input type = 'radio' name = 'radios'> select all "）; document.write（" <入力タイプ= 'ラジオ'>ラジオ> anti-lect "）; </script> </> </</> </body>

2.スクリプトスクリプト

2.1関数を呼び出す方法の使用

<script type = "text/javascript"> window.onload = function（）{var nums = document.getelementsbyname（ "nums"）; var radios = document.getElementsbyname（ "radios"）; fun（nums、i、radio）; i = 0; i <a.length; i ++）{a [i] .checked = true;}} else if（b == 1）{for（var i = 0; i <a.length; i ++）{a [i] .checked = false;}} else if（b == 2）{for（for i = 0; i <a.length; i ++）{if（a [i] .Checked）{a [i] .Checked = false;} else {a [i] .checked = true;}}}} </script>

2.2閉鎖に匿名関数を作成する方法を使用する

<script type = "text/javascript"> window.onload = function（）{var nums = document.getElementsbyname（ "nums"）; var radios = document.getElementsByname（ "Radios"）; i = 0; i <nums.length; i ++）{nums [i] .checked = true;}} else if（a == 1）{for（var i = 0; i <nums.length; i ++）{nums [i] .checked = fals;}} else if（a == 2）{for（var i = 0; i <nums.length; i ++）{if（nums [i] .checked）{nums [i] .checked = false;} else {nums [i] .Checked = true;}}}}）（i）;}}} </scrip>

3。ボックスを引き下げます

<form name = "myform"> <select name = "sels"> <option>北京大学</option> <options> chang'an大学</option> <options> option> option> </select> </form>

選択したセットまたはドロップダウンボックスの選択した状態に戻る

選択されたtrue選択は選択されていません

SelectedIndexセットまたは[ドロップダウン]ボックスで選択されたインデックス番号を設定または返します

例1：Chang'an Universityを選択します

<Script> var sels = document.myform.sels; // var sels = document.myform.sels.options; //（それも可能です）sels [1]

または

<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; //（それも可能です）sels.selectedindex = 1; </script>

例2：単価 *数量=合計価格

1.png

1.DOM構造

<body><form name="myform" action="#" method="post" id="form1">Unit price: <input type="text" name="price" value="200"><select name="count">Quantity<option>1</option><option>2</option><option>3</option></select>Total price: <input type="text" name="total" value="200"></form></body>

2.スクリプトスクリプト

<script type = "text/javascript"> window.onload = function（）{var price = document.myform.price; var count = document.myform.count; var total = document.myform.total; count.onchange = function（）{total.value = parseint（price.value）*（count.selectentindex+1）; }} </script>

4。テキスト領域

値は、テキスト領域の値を返品または設定します

例：テキスト領域に入力された文字の長さを動的に検出します

1.png

1.DOM構造：

 <body> <div id = "content">合計20文字を入力し、0が入力され、20が入力され、20が入力できます</div> <form name = "myform" action = "＃" method = "post" id = "form1"> <textarea name = "info" cols = "60" rows = "7"> </form> </body> </body> </body> </body> </body> </body> </body>

2.スクリプトスクリプト：

 <script type = "text/javascript"> window.onload = function（）{var content = document.getElementbyId（ "content"）; var info = document.info.info; info.onkeyup = info.onkeydown = function（）{var str = info.value; var strs = check（str）; var strs = 20; 「+strs+」文字が入力され、「+length+」も入力でき、「+（strs-length）+"s"も入力できます; i = 0; i <str.length; i ++）{if（str.charcodeat（i）> = 0 && str.charcodeat（i）<= 255）{// inglish num ++;} else {//中国語num+= 2;}} return num;}}} </scrip>

5。フォーム検証

フォームが提出されたときに発射されたOnSubmitイベント

<form name = "myform" action = "www.baidu.com" method = "post" onsubmit = "return check（this）"> </form> return false; //フォームのデフォルトの動作をブロックします

6.メソッドを送信します

この方法は、自動提出物を実装するために使用されます

イベントOnSubmitは、手動での送信にのみ使用できます

上記は、編集者によって導入されたJavaScript操作フォームの説明の例です（パート2）。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！