- ベストアンサー
チェックボックスにチェック制限と未チェック時の0入力方法
- チェックボックスにチェック制限を設けながら、未チェックの場合には0が入力される方法は可能です。
- 上記の方法では、チェックできる項目の数を制限するJavaScriptコードを使用しています。
- チェックボックスがチェックされない場合には、隠しフィールドを使用して0が入力されるようになっています。
- tajix14
- お礼率72% (175/242)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
（正直、もう説明が面倒だな～。コードを書くのが楽） phpで処理するのだったら、どんなデータが送られてきても対応しなきゃならない。 なのでそれをそっちできっちり行うべき。 ＞思うに、そのスクリプトをどこに 回答したコードを解析する気がないようだから input要素のvalue値を最初に読み取って記録し、checkedがtrueではないものは０にしています。 スクリプトが例えば<head>内にあると、まだ読み込まれていない。なので０にならない。 そもそも<input type="checkbox" name="chk[]" value="1">のようにして配列で渡して そっちでチェックするんじゃなかったかな？ で、これで回答を終わります。 再質問して、他の回答者の答えを伺ってください。
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
思うに、そのスクリプトをどこに置いているか？だとエスパーしてみる
補足
スクリプトではなく、自サーバー内のmysqlにインサートするphpを組んでいます。全数チェックだとch1からch5まで入力されるため、すべてインサートされますが、空欄があるとmysqlエラーになってしまいます。
- babu_baboo
- ベストアンサー率51% (268/525)
おはようございます。 初期化を適当に書いたのがまずかったですね。ごめんなさい。 this.vals.push (e.value); e.checked ? (this.buff.push(e)): (e.value='0'); の順序にして訂正します。 value値のcheck機能をつける。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <form id="piyo" action="#"> <p> <label><input type="checkbox" name="ch1" value="1">1</label> <p> <label><input type="checkbox" name="ch2" value="2">2</label> <p> <label><input type="checkbox" name="ch3" value="3">3</label> <p> <label><input type="checkbox" name="ch4" value="4">4</label> <p> <label><input type="checkbox" name="ch5" value="5">5</label> </form> <input type="button" value="test"> <script> var bfMx = 3; var buff = [], vals = []; var list = ['ch1', 'ch2', 'ch3', 'ch4', 'ch5'].map ( function (n, i) { var e = this.es[n]; this.vals.push (e.value); e.checked ? (this.buff.push(e)): (e.value='0'); return e; }, { es: document.getElementById ('piyo').elements, buff: buff, vals: vals }); function fuga (e) { var idx, idx1, t; ((idx = list.indexOf (e)) >= 0) ? (t = (e.checked) ? (buff.push ((e.value = vals[idx], e)) > bfMx) ? buff[0] : null : e ) ? ((idx1 = buff.indexOf ((t.checked = Boolean (t.value = 0), t))) >= 0) ? buff.splice (idx1, 1) : null : null : null; } function hoge (event) { var e = event.target; if ('INPUT' === e.tagName) if ('checkbox' === e.type) fuga (e); else if ('button' === e.type) alert( Array.prototype.map.call( document.querySelectorAll ( '#piyo input[name^=ch]' ), function (e, i) { return [i, e.value].join (' = '); } ).join('\n') ) } document.addEventListener ('click', hoge, false); </script>
補足
有難うございます。本当に頭が下がります。 ただ、やはり、0の代入が出来ないようです。 var bfMx = 5;にして、5個(全数)入力すると問題なく全て反映されます。 (フォームのPHPの記載に問題はありません) 3個だと残りの2個に0が代入されずエラーになります。 お手数をお掛けし申し訳ございません。 あと僅かだと思いますので、お時間が許しましたらご教授頂ければと存じます。 よろしくお願いいたします。
- babu_baboo
- ベストアンサー率51% (268/525)
ななめ上(?)から、 なぜ onclick のオンパレードにするかな… そもそも 複数選ぶためにある checkbox なのだから１つでやるのがおかしい！ なので、value値をかえることになる、それがそれをそれでそんなに複雑にする！ Array.indexOf とArray.map とaddEventListenerがつかえるブラウザが必要です。 可読性が悪いのは、悪意ではありません。コメントもめずらしく付けたし。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <form id="piyo" action="#"> <p> <label><input type="checkbox" name="ch1" value="1">1</label> <p> <label><input type="checkbox" name="ch2" value="2">2</label> <p> <label><input type="checkbox" name="ch3" value="3">3</label> <p> <label><input type="checkbox" name="ch4" value="4">4</label> <p> <label><input type="checkbox" name="ch5" value="5">5</label> </form> <script> var bfMx = 3; var buff = [], vals = []; var list = ['ch1', 'ch2', 'ch3', 'ch4', 'ch5'].map ( function (n, i) { var e = this.es[n]; e.checked ? (this.buff.push(e)): null; this.vals.push (e.value); return e; }, { es: document.getElementById ('piyo').elements, buff: buff, vals: vals }); function fuga (e) { var idx, idx1, t; ((idx = list.indexOf (e)) >= 0) // listにeがあるなら ? (t = //tには（値を０にし、buffから削除するものを）以下の条件で代入する (e.checked) ? (buff.push ((e.value = vals[idx], e)) > bfMx) //buffに、value値を復活したeを加えたとき、3個より大きければ ? buff[0] //削除対象を０番目とする : null : e // buffにあるかもしれないのでチェック ) ? ((idx1 = buff.indexOf ((t.checked = Boolean (t.value = 0), t))) >= 0) //バッファに削除するものがあるか？ ? buff.splice (idx1, 1)//削除の実行 : null : null : null; } function hoge (event) { var e = event.target; if ('INPUT' === e.tagName) if ('checkbox' === e.type) fuga (e); } document.addEventListener ('click', hoge, false); </script> </body>
補足
有難うございます。 丁寧な説明まで付けて頂き大変恐縮しております。 試してみたところ、個数制限は出来ました。有難うございます。 ただ、クリックしなかったものは空欄になるようです。当方が欲している「0の自動入力」にはなりません。 環境は、i-phone5です。 スマートフォン用サイトなので、safariとcromeに対応する必要があるのですが、safariでは、Array.indexOf とArray.map とaddEventListener が使えないのでしょうか? 大変申し訳ありません。 safariとcromeの環境で「0の代入」が可能であればご教授頂けましたら幸いです。 よろしくお願いいたします。
- askaaska
- ベストアンサー率35% (1455/4149)
onClick="chBx(this)" とすると chBxの引数に来るのはチェックボックスそのものよ たとえば function chBx(o) { alert(o.checked); } てすればチェックボックスがチェックされているかどうかが true or falseで取れるわ
補足
下記でダメでした。 function chBx(o) { alert(o.checked); } の使い方が理解できておらず、折角のご指導を生かすことができません。本当に申し訳ありません。 【ダメだったソース】 <SCRIPT language="JavaScript"> <!-- chn = new Array("ch1","ch2","ch3","ch4","ch5"); chc = 3; function chBx(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.form1.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("チェックできる項目は" + chc + "個までです"); document.form1.elements[cn].checked = false; } } //--> </SCRIPT> <input type="hidden" name="ch1" value="0"> <input type="checkbox" name="ch1" value="2" onclick="chBx('ch1').form.ch1.value=this.checked ? 1 : 0">
- askaaska
- ベストアンサー率35% (1455/4149)
方法はいろいろあると思うけど 例えば chBxの引数をthisにして chBxを書きかえれば 早いと思うわ
補足
早速のご回答有難うございます。 下記のように、JavascriptのchBxの部分をthisに変更してみたのですが、これだとまだ4つ以上チェック出来てしまいます。 その他に変更するところがあるのでしょうか? <input type="checkbox" onclick=" の後の部分をどうすればいいかご教授頂ければと思います。 よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5"); chc = 3; // チェックできる数 // チェックボックスにチェックできる数を制限する function this(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.form1.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("チェックできる項目は" + chc + "個までです"); document.form1.elements[cn].checked = false; } } //--> </SCRIPT> <input type="hidden" name="ch1" value="0"> <input type="checkbox" onclick="this.form.ch1.value=this.checked ? 1 : 0"> <input type="hidden" name="ch2" value="0"> <input type="checkbox" onclick="this.form.ch2.value=this.checked ? 1 : 0"> <input type="hidden" name="ch3" value="0"> <input type="checkbox" onclick="this.form.ch3.value=this.checked ? 1 : 0"> <input type="hidden" name="ch4" value="0"> <input type="checkbox" onclick="this.form.ch4.value=this.checked ? 1 : 0"> <input type="hidden" name="ch5" value="0"> <input type="checkbox" onclick="this.form.ch5.value=this.checked ? 1 : 0">
お礼
本当にありがとうございました。 ヒントを沢山いただきました。 前回頂いたコードで、スクリプトに渡す方式だと機能するのだと思います。 当方はPHP側も再度見直してみます。 本当にありがとうございました。