- ベストアンサー
チェックボックスの値
チェックボックスの値を取得する方法を調べています。 サイトの例では、チェックボックスが全てTformという同一のフォーム内にあります。これが仮に異なるフォームにある場合、どのように処理したらいいのでしょうか？ http://musashisakai.chiikihp.net/master/java/checkbox1.php#2 Tform1 Tform2 Tform3 Tform4 にそれぞれチェックボックスがある場合です。 もし分かる方がいましたら教えてください。 よろしくお願いします。
- taaaaaaa
- お礼率40% (45/111)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
・ 「１つのフィールドに表示する」ボタンを付け加えてみました。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function checktest() { var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { d = fs[f].elements; checkvalue = ''; for (var i = 0; i < d.length; i++ ) { if (d[i].checked == true) { checkvalue += d[i].value; } } d.result.value = checkvalue; } } function checktest2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { d = fs[f].elements; checkvalue = ''; for (var i = 0; i < d.length; i++ ) { if (d[i].checked == true) { checkvalue += d[i].value; } } ss += checkvalue; } document.getElementById('ch_all').innerHTML = ss; } //--> </script> </head> <body> <button onclick="checktest()"> ALL CHECK</button> <hr /> <button onclick="checktest2()"> ALL CHECK2</button> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="checkbox" name="test" value="1"> 1 <input type="checkbox" name="test" value="2"> 2 <input type="checkbox" name="test" value="3"> 3 <input type="checkbox" name="test" value="4"> 4 <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform2"> <input type="checkbox" name="test" value="A"> A <input type="checkbox" name="test" value="B"> B <input type="checkbox" name="test" value="C"> C <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform3"> <input type="checkbox" name="test" value="M"> M <input type="checkbox" name="test" value="N"> N <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform4"> <input type="checkbox" name="test" value="X"> X <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form>
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
次の２点を仮定してみます。 ・ フォーム名等が規則正しい。 ・ １つのボタンで処理をする。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function checktest() { var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { d = fs[f].elements; checkvalue = ''; for (var i = 0; i < d.length; i++ ) { if (d[i].checked == true) { checkvalue += d[i].value; } } d.result.value = checkvalue; } } //--> </script> </head> <body> <button onclick="checktest()"> ALL CHECK</button> <hr /> <form name="Tform1"> <input type="checkbox" name="test" value="1"> 1 <input type="checkbox" name="test" value="2"> 2 <input type="checkbox" name="test" value="3"> 3 <input type="checkbox" name="test" value="4"> 4 <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform2"> <input type="checkbox" name="test" value="1"> 1 <input type="checkbox" name="test" value="2"> 2 <input type="checkbox" name="test" value="3"> 3 <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform3"> <input type="checkbox" name="test" value="1"> 1 <input type="checkbox" name="test" value="2"> 2 <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form> <form name="Tform4"> <input type="checkbox" name="test" value="1"> 1 <P> 取得値表示： <input type="text" name="result"> </P> <input type="button" value="test" onclick="checktest()"> </form>
お礼
早速ありがとうございます。 動作確認してみました。 チェックの結果を１つのフィールドに表示するように出来ますか？ 例）１３４をチェックで１３４と表示。 なら尚良いのですが。
- yambejp
- ベストアンサー率51% (3827/7415)
ざっとかくとこんな感じ。 場合によってはもう少し検索条件をつけたほうがよいかもしれませんが。 また、参考にされているページですが若干内容が古く、formにnameを つけるのは今では非推奨です。 <html> <head> <script type="text/javascript"> function checktest() { var tags = document.getElementsByTagName("input") var checkvalue = ''; for (var i = 0; i < tags.length; i++ ) { if (tags[i].type=="checkbox" && tags[i].checked == true) { checkvalue += tags[i].value; } } document.getElementById('result').value = checkvalue; } </script> <style type="text/css"> form{ margin:0px; padding:0px; } </style> <body> <form id="Tform1"> <input type="checkbox" name="test" value="1">1 </form> <form id="Tform2"> <input type="checkbox" name="test" value="2">2 </form> <form id="Tform3"> <input type="checkbox" name="test" value="3">3 </form> <form id="Tform4"> <input type="checkbox" name="test" value="4">4 </form> <form> <P>取得値表示：<input type="text" name="result" id="result"></P> <input type="button" value="test" onclick="checktest()"> </form> </html>
補足
試してみました。 ありがとうございます。 もう１つ質問ですが、同じページにもう１つチェックボックスがあり、 <form> <input type="checkbox" name="my" value="0">0 </form> これは表示に入れない場合はどのようにしたらよろしいでしょうか？
お礼
動作確認出来ました。 ありがとうございます。 これを業務に活用出来るか取り組んでみようと思います。