プロが教えるわが家の防犯対策術!

下記の動作をする checkfunc(); の書き方をご教示ください.


<html>
<head>
<script type="text/javascript">
checkfunc()
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="yesno" value="1">チェックボックス
<input type="radio" name="rdo1" value="0">ラジオボタン0
<input type="radio" name="rdo1" value="1">ラジオボタン1
<input type="radio" name="rdo1" value="2">ラジオボタン2
<input type="radio" name="rdo1" value="3">ラジオボタン3
<input type="radio" name="rdo1" value="4">ラジオボタン4
</form>
</body>
</html>

(1) このHTMLのラジオボタン5つは,最初は全てdisabledです.
(2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです.
(3) 逆に,チェックが外れたらラジオボタンはdisabledに戻ります.
(4) このjavascriptは,PHPファイルに組み込みますが.表示時にDBを読み込んでどれに
 チェック/選択されていたかによって,checkboxやradioに「checked」を追記します.
 その場合,enabled/disablesの関係に矛盾がないようにもしたいですが,
 <body>に onload="checkfunc();" と入れればいいでしょうか?

なお,IE以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

このQ&Aに関連する最新のQ&A

A 回答 (1件)

litton101 さん、こんにちは。



さて litton101 さんのスクリプト、以下のように修正させていただきました。お試しあれ。

<html>
<head>
<script type="text/javascript">
function checkfunc() {

for(i=0; i<5; i++) {

document.myform.rdo1[i].disabled = !(document.myform.yesno.checked);

}

}
</script>
</head>
<body onLoad="checkfunc();">
<form name="myform">
<input type="checkbox" name="yesno" value="1" onClick="checkfunc();">チェックボックス
<input type="radio" name="rdo1" value="0">ラジオボタン0
<input type="radio" name="rdo1" value="1">ラジオボタン1
<input type="radio" name="rdo1" value="2">ラジオボタン2
<input type="radio" name="rdo1" value="3">ラジオボタン3
<input type="radio" name="rdo1" value="4">ラジオボタン4
</form>
</body>
</html>
    • good
    • 0
この回答へのお礼

hkd9001さん,
迅速かつ完璧な(!)ご回答ありがとうございました,早速組み込んで大変快適です.
実は,途中まで解決できていたのですが,途中で挫折していました.
でも,ご提示いただいたScriptで,おかげさまで,解決しました.
本当にありがとうございました.



自己レス,もったいないので(?!)掲示しますね・・
------------

元質問者です,過去質問を応用したら,ON/OFFに応じたdisabledは実現できました…
http://oshiete1.goo.ne.jp/qa1768091.html

が,「更新(F5)」ボタンを押したり,
PHPでDBに登録してある値に応じてHTML表示時にラジオボタンにチェックしたり
などの動作を加えると,既定で追加されている「disabled」が効いてしまい,
「チェックは入っているのにdisabled」状態になってしまいます.
この点,何とかならないでしょうか?よろしくお願い致します.


(1) checkfuncを追加
(2) チェックボックスに, onclick="checkfunc(this);"を追加
(3) 各ラジオボタンに,「class="rdo1" disabled」を追加


<html>
<head>
<script type="text/javascript">
function checkfunc(f) {
for(var i=0; i<f.form.length; i++){
if (f.form.elements[i].className == "rdo1") {
f.form.elements[i].disabled = !f.checked;
}
}
}
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="yesno" value="1" onclick="checkfunc(this);">チェックボックス
<input type="radio" name="rdo1" value="0" class="rdo1" disabled>ラジオボタン0
<input type="radio" name="rdo1" value="1" class="rdo1" disabled>ラジオボタン1
<input type="radio" name="rdo1" value="2" class="rdo1" disabled>ラジオボタン2
<input type="radio" name="rdo1" value="3" class="rdo1" disabled>ラジオボタン3
<input type="radio" name="rdo1" value="4" class="rdo1" disabled>ラジオボタン4
</form>
</body>
</html>

お礼日時:2007/01/24 17:24

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QチェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

7番のcheckboxをON→1,2,4,5番にチェックもON
7番のcheckboxをOFF→1,2,4,5番にチェックもOFF

という風に動作させる記述をご教示ください。
よろしくお願い致します。


<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br>
今年<br>
4番<input type="checkbox" name="kotosi[]" value="1">1月<br>
5番<input type="checkbox" name="kotosi[]" value="2">2月<br>
6番<input type="checkbox" name="kotosi[]" value="3">3月<br>
7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br>
</form>
</body>
</html>

7番のcheckboxをON→1,2,4,5番にチェックもON
7番のcheckboxをOFF→1,2,4,5番にチェックもOFF

という風に動作させる記述をご教示ください。
よろしくお願い致します。


<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br...続きを読む

Aベストアンサー

条件が複雑になるともう少し工夫が必要になりますが、
とりあえずはこんな感じでいけると思います。

<html>
<head>
<script type="text/javascript">
function checkFunc(obj){
f=obj.form
for(var i=0;i<f.length;i++){
if((f[i].name=="kyonen[]" || f[i].name=="kotosi[]")&& (f[i].value=="1" ||f[i].value=="2")) f[i].checked=obj.checked
}
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br>
今年<br>
4番<input type="checkbox" name="kotosi[]" value="1">1月<br>
5番<input type="checkbox" name="kotosi[]" value="2">2月<br>
6番<input type="checkbox" name="kotosi[]" value="3">3月<br>
7番<input type="checkbox" name="mychk" onClick="checkFunc(this)">去年と今年の1、2月をまとめてチェック<br>
</form>
</body>
</html>

条件が複雑になるともう少し工夫が必要になりますが、
とりあえずはこんな感じでいけると思います。

<html>
<head>
<script type="text/javascript">
function checkFunc(obj){
f=obj.form
for(var i=0;i<f.length;i++){
if((f[i].name=="kyonen[]" || f[i].name=="kotosi[]")&& (f[i].value=="1" ||f[i].value=="2")) f[i].checked=obj.checked
}
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月...続きを読む

Qボタンを動的にdisabledさせたいのですが

お世話になります。

ある画面に複数ボタンがあって
押されたボタンをdisabledにしたいなと思っています。
ただしどのボタンがおされても同じ関数に飛んでほしいのですが
いまいち解決できません。

<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()">
</form
>
とあった場合

function hogehoge(){
document.form.ボタンの名前.disabled=true;
}

としたいのですが
名前の部分は動的に変えることは可能なのでしょうか?
普通に
document.form.syori1.disabled=true;
と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。

ボタン名は
onClick="javascript:hogehoge(document.form.ボタンの名前.name)"
で、送ることができるのは確認したのですが
hogehoge(ボタンの名前)
の方でどうやってdisabledのところに入れればいいか解りません。
よろしくお願い致します。

お世話になります。

ある画面に複数ボタンがあって
押されたボタンをdisabledにしたいなと思っています。
ただしどのボタンがおされても同じ関数に飛んでほしいのですが
いまいち解決できません。

<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()">
</form
>
...続きを読む

Aベストアンサー

そういう場合は名前じゃなくて、thisというオブジェクトを渡します。

<script language=javascript>
function hogehoge(btn){
btn.disabled=true;
}
</script>
<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge(this)">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge(this)">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge(this)">
</form>

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qフォーム内checkboxのチェック可・不可の切替

お問い合わせフォームを作ろうと思っております。
その中で、一方のチェックボックスにチェックを入れると、別のチェックボックスが入力不可になるような動作のものをjavascriptにて作りたいのですが、どうも上手くいかずにおります。。

具体的には、下記のような内容のものを作ろうと思っています。
http://www.gazo.cc/up/19941.jpg

Q.1ですが、(1)、(2)それぞれの選択1・選択2は同時にチェックする事はできないようにしたいです。
ただし、『(1)の選択1・(2)の選択2』また『(1)の選択2、(2)の選択1』という組み合わせのチェックは可能です。

Q.2ですが、特に無しを選択すると、選択1、選択2、選択3はチェックする事はできないようにしたいです。
また可能でしたら、下にある、2箇所テキスト入力部分は、選択3が選択されないと入力不可の状態にしたいと思っています。


ご回答の程、よろしくお願い致します。

Aベストアンサー

チェックボックスにdisabledという属性を設定すれば入力不可にできるので、
onclickイベントで希望の処理をすればいいと思います。

とても簡単に書くと
<html>
<body>
<form name="f1">
選択1<input type="checkbox" name="chk1" onClick="document.f1.chk2.disabled = this.checked;">
選択2<input type="checkbox" name="chk2" onClick="document.f1.chk1.disabled = this.checked;">
</form>
</body>
</html>
としておけば、選択1をチェックしたら選択2は入力不可になります。

あくまでもサンプルですので、参考までに。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qラジオボタンの選択肢をサーブレットで取得するには?

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="radiobutton">
割引手形 
<input type="radio" name="radiobutton" value="radiobutton">
手形貸付 
<input type="radio" name="radiobutton" value="radiobutton">
証書貸付
</p>

ブラウザー側からは
<form action="http://localhost/servlet/yuushi" method=post>
の指定を行っています。
サーブレットでの受け取り方を、
String p2=request.getParameter("radiobutton");
 とすると、p2=radiobuttonとデータがセットされました。

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="...続きを読む

Aベストアンサー

それぞれの項目の value を、ユニークにして下さい。例えば、

<input type="radio" name="radiobutton" value="1"> 割引手形 
<input type="radio" name="radiobutton" value="2"> 手形貸付 
<input type="radio" name="radiobutton" value="3"> 証書貸付

そうすれば、「手形貸付」を選択したときに

String p2 = request.getParameter("radiobutton");

とすれば、p2 は "2" になります。

Qdiv要素内の全input要素をdisable

Javascriptで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか?
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}


人気Q&Aランキング