- ベストアンサー
チェックボックス制御２つ以上併記したい
- チェックボックスの選択数制御をしたいと思っています。Javascript初心者です。
- 同じ画面上に複数の質問がありまして、チェックボックスの選択数制御をしたいですが、うまく動作しません。
- どの部分が問題となっているのでしょうか。また、３つの質問について対処法を教えていただきたいです。
- kujitan
- お礼率84% (158/187)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
１つめの関数に二つ目の関数が上書きされています。 結合するか別関数にしてください。 onclick="func1();func2();" のように２つ 関数は記述できます。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
＞対処法をご教示いただけないでしょうか 原因は、No1様がご指摘のようにchBx()が上書きされているからだと推測されます。 （呼び出し方が不明ですが…） 一番簡単なのは変数名をchn、chn2・・としているように、関数名も変えてそれぞれ別関数にしておく方法。 でもそれだと、ほとんど同じ内容のものを必要なだけコピーすることになるので、違うところだけを制御できるようにしておいて一般化してまとめることで全体を少し短くできます。 参考までのサンプル。 HTMLがどのような構成なのかわからないので、No2様のHTMLソースを拝借しました。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function hoge(evt){ //それぞれのグループのチェック許容数最大値 var limit ={ "group1":1, "group2":2, "group3":3 }; var t = evt.target || evt.srcElement; var cnt=0, p = t.parentNode; var elm, e, i, max; if(t.nodeName!="INPUT" || t.type!="checkbox" || !t.checked || !(max=limit[p.id])) return; elm = p.getElementsByTagName("input"); for(i=0; e=elm[i++];) if(e.type=="checkbox" && e.checked) cnt++; if(cnt>max){ t.checked = false; alert("チェックは" + max + "個まで"); } } //--> </script> </head> <body> <form action="#" onclick="hoge(event)"> <fieldset id="group1"> <legend>group1</legend> <input type="checkbox" value="0" name="a_1" checked>a_1 <input type="checkbox" value="1" name="a_2">a_2 <input type="checkbox" value="2" name="a_3">a_3 <input type="checkbox" value="3" name="a_4">a_4 </fieldset> <fieldset id="group2"> <legend>group2</legend> <input type="checkbox" value="0" name="b_1" checked>b_1 <input type="checkbox" value="1" name="b_2">b_2 <input type="checkbox" value="2" name="b_3">b_3 <input type="checkbox" value="3" name="b_4">b_4 </fieldset> <fieldset id="group3"> <legend>group3</legend> <input type="checkbox" value="0" name="c_1" checked>c_1 <input type="checkbox" value="1" name="c_2">c_2 <input type="checkbox" value="2" name="c_3">c_3 <input type="checkbox" value="3" name="c_4">c_4 </fieldset> </form> </body> </html>
お礼
ご丁寧な回答をいただきまして大変ありがとうございました。 結局、＃１様のご回答から、それぞれの設問数分記述して解決させたのですが、いただいたご回答のようにすっきりとした記述ができるよう勉強していきたいと思います。 本当にありがとうございます。 みなさまBAとさせていただきたいのですが、最初にご回答いただいた方をBAとさせていただきました。 大変ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくにしてね。 ie9みまんは、だめだろうなぁ～ <!DOCTYPE html> <html lang="ja"> <title></title> <meta charset="UTF-8"> <body> <form id="hoge"> <fieldset> <legend>test1</legend> <input type="checkbox" value="0" name="a" checked>a0 <input type="checkbox" value="1" name="a">a1 <input type="checkbox" value="2" name="a">a2 <input type="checkbox" value="3" name="a">a3 </fieldset> <fieldset> <legend>test2</legend> <input type="checkbox" value="0" name="b" checked>b0 <input type="checkbox" value="1" name="b">b1 <input type="checkbox" value="2" name="b">b2 <input type="checkbox" value="3" name="b">b3 </fieldset> <fieldset> <legend>test3</legend> <input type="checkbox" value="0" name="c" checked>c0 <input type="checkbox" value="1" name="c">c1 <input type="checkbox" value="2" name="c">c2 <input type="checkbox" value="3" name="c">c3 </fieldset> </form> <script type="text/javascript"> (function () { function Limitter (form, name, limit) { this.form = form, this.name = name, this.limit = limit; } function handler (event) { var e = event.target; if (('INPUT' !== e.nodeName) || (e.form !== this.form) || (e.name !== this.name)) return; var s = '[name="' + this.name + '"]'; var c = this.form.querySelectorAll (s + ':checked'); var a = this.form.querySelectorAll (s); if (this.limit === c.length) Array.prototype.forEach.call (a, function (i) { i.disabled = !i.checked; }); else Array.prototype.forEach.call (a, function (i) { i.disabled = false; }); } function start () { this.form.ownerDocument.addEventListener ('click', this, false); } function createLimitter (form, name, limit) { if (3 > arguments.length) return false; var obj = new Limitter (form, name, limit); start.call (obj); handler.call (obj, {'target': form.querySelector ('[name="' + name + '"]')}); } Limitter.prototype.handleEvent = handler; this.checkboxLimitter = createLimitter; })(); var form = document.querySelector ('#hoge'); checkboxLimitter (form, 'a', 1); checkboxLimitter (form, 'b', 2); checkboxLimitter (form, 'c', 3); </script>
お礼
詳細な回答をいただきまして本当にありがとうございます。 大変参考になります。まだまだどう使っていいかわからない点が多く、勉強不足痛感しています。 みなさまBAとさせていただきたいのですが、最初にご回答いただいた方をBAとさせていただきました。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 alice_asahina様のご回答をヒントに調べていき、動かすことができました。 早々にご回答いただきまして大変ありがとうございました。