- ベストアンサー
checkboxの選択数制限と排他処理について
- 質問文章からcheckboxの選択数制限と排他処理についての解説です。
- チェックボックスを使用したクイズサイトにおいて、正解数以上のチェックをした場合に最初にチェックした方のチェックが外れる仕組みの組み込み方法を説明します。
- 選択数の制限や排他処理については理解できるが、具体的な実現方法が分からない場合の解決策についても説明します。
- ilir
- お礼率50% (3/6)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞最初にチェックした方のチェックボックスのチェックが外れるという仕組み というためには、チェックした順番を記憶しておく必要があります。 ごく簡単な例 * 必ずfieldsetでグループ化されていると仮定しています（要id） * 初期状態は全てチェックがクリアされていると仮定 （チェック状態でリロードしたりする場合は、修正の要あり） <!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 checker(evt, max){ var t = evt.target || evt.srcElement; if (t.nodeName != "INPUT" || t.type != "checkbox") return; var lng, rec, i, p = t.parentNode; if (p.nodeName != "FIELDSET" || !p.id) return; if (undefined == this.record) this.record = {}; if (!this.record[p.id]) this.record[p.id] = []; rec = this.record[p.id], lng = rec.length; if (t.checked){ rec.push(t); if (lng >= max) rec.shift().checked = false; } else { for (i=0; i<lng; i++){ if (t == rec[i]) {rec.splice(i, 1); break; } } } } //--> </script> </head> <body> <form> <fieldset id="options" onclick="checker(event, 2)"> <input type="checkbox" name="" value="1">1<br> <input type="checkbox" name="" value="2">2<br> <input type="checkbox" name="" value="3">3<br> <input type="checkbox" name="" value="4">4<br> <input type="checkbox" name="" value="5">5 </fieldset> <fieldset id="options1" onclick="checker(event, 3)"> <input type="checkbox" name="" value="1">6<br> <input type="checkbox" name="" value="2">7<br> <input type="checkbox" name="" value="3">8<br> <input type="checkbox" name="" value="4">9<br> <input type="checkbox" name="" value="5">10 </fieldset> </form> </body> </html>
その他の回答 (5)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 どの順番でチェックしたかというのを変数（バッファ）に保存しておいて、 2つ以上チェックされたら、そのバッファの古い方からチェックを外していく、という考え方で良いと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
#3,4 です あれこれ、ごしてきをうけました。 さて、 click イベントだけ、みるのは、ふじゅうぶんだそうです。きぼーどからだとやりほうだい。 そもそも、さいだいすうをこえたときに、けいこくをはっするのがとくさく。 にゅうりょくちをプログラムがわであんいにへんこうしてはならないとのこと。 しか～し、HTMLにも、もんだいがあったので、さいあっぷ。 <!DOCTYPE html> <title></title> <body> <form action="#"> <p id="hoge" onclick="hogeCheck(event)" onchange="hogeCheck(event)"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </p> <p id="huga" onclick="hugaCheck(event)" onchange="hogeCheck(event)"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </p> </form> <script type="application/javascript;version=1.8"> function ExclusiveCheckboxChecker (group, length) { var checkboxs = group.querySelectorAll ('input[type="checkbox"]:checked'); var buffer = []; Array.forEach (checkboxs, function (c) { (buffer.length < length) ? buffer.push (c) : c.checked = false }); return function (evt) { var checkbox = evt.target; var func = (function (b) b !== checkbox); ('checked' in checkbox) ? (checkbox.checked) ? (buffer.every (func)) ? let (d = buffer.push (checkbox)) (length < buffer.length) ? (buffer.shift ()).checked = false : null : null : buffer = buffer.filter (func) : null; } } var hogeCheck = ExclusiveCheckboxChecker (document.querySelector('#hoge'), 2); var hugaCheck = ExclusiveCheckboxChecker (document.querySelector('#huga'), 3); </script>
お礼
ご回答いただきありがとうございます。お忙しい中、こんなに手を貸していただいて本当にすいません もう少し勉強させていただきます。
- babu_baboo
- ベストアンサー率51% (268/525)
＃３です。ひるめしたべてながめたら、みすはっけん！ function ExclusiveCheckboxChecker (group, length) { var buffer = []; return function (evt) { var checkbox = evt.target; var checkboxs = group.querySelectorAll ('input[type="checkbox"]'); var func = function (b) b !== checkbox; 'checked' in checkbox ? checkbox.checked ? buffer.every (func) ? (buffer.push (checkbox), (length < buffer.length)) ? (buffer.shift ()).checked = false : null : null : buffer = buffer.filter (func) : null; } } evt.target が、かならずしも checkbox とはかぎらない。これだと radio もとおるけど、そこはそれ・・・ buffer.every (func) も、ちょっとへんこう。（ちょっとfujillinさんに近いか？）
- babu_baboo
- ベストアンサー率51% (268/525)
そんなのひるめしまえだぁ～！ とおもったら、すぎていた。 Firefox ならうごくと・・・ ぜんかくくうはくは、はんかくにしてちょ。 <!DOCTYPE html> <title></title> <body> <form action="#" id="hoge"> <p id="hoge" onclick="hogeCheck(event)"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <p> <p id="huga" onclick="hugaCheck(event)"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <p> </form> <script type="application/javascript;version=1.8"> function ExclusiveCheckboxChecker (group, length) { var buffer = []; return function (evt) { var checkbox = evt.target; var checkboxs = group.querySelectorAll ('input[type="checkbox"]'); var func = function (b) b !== checkbox; checkbox.checked ? Array.every (buffer, func) ? (buffer.push (checkbox), (length < buffer.length)) ? (buffer.shift ()).checked = false : null : null : buffer = buffer.filter (func); } } var hogeCheck = ExclusiveCheckboxChecker (document.querySelector('#hoge'), 2); var hugaCheck = ExclusiveCheckboxChecker (document.querySelector('#huga'), 3); </script>
- yambejp
- ベストアンサー率51% (3827/7415)
私の理解がまちがっていたらごめんなさい。 5設問中2つ答えていいという意味であればこんな感じ <script> function check(o){ var c=0; var f=o.form; for (i=0; i < f.length; i++){ if(f[i].type && f[i].type=='checkbox' && f[i].checked==true) c++; } for (i=0; i < f.length; i++){ if(f[i].type && f[i].type=='checkbox' && f[i].checked==false) f[i].disabled=(c>=2); } } </script> <form> <fieldset id="options"> <input type="checkbox" name="" value="" onclick="check(this);">1<br> <input type="checkbox" name="" value="" onclick="check(this);">2<br> <input type="checkbox" name="" value="" onclick="check(this);">3<br> <input type="checkbox" name="" value="" onclick="check(this);">4<br> <input type="checkbox" name="" value="" onclick="check(this);">5<br> </fieldset> </form> 単純にラジオボタン風に処理したいならこんな感じ <script> function check(o){ var f=o.form; for (i=0; i < f.length; i++){ if(f[i].type && f[i].type=='checkbox' && f[i]!=o) f[i].checked=false; } } </script> <form> <fieldset id="options"> <input type="checkbox" name="" value="" onclick="check(this);">1<br> <input type="checkbox" name="" value="" onclick="check(this);">2<br> <input type="checkbox" name="" value="" onclick="check(this);">3<br> <input type="checkbox" name="" value="" onclick="check(this);">4<br> <input type="checkbox" name="" value="" onclick="check(this);">5<br> </fieldset> </form>
お礼
さっそくのご回答ありがとうございます 初めて利用させていただいたのですが回答の早さに驚きました。ありがとうございます
お礼
ありがとうございます。まさに上記のような動作を考えておりました。配列のレコードを使用するのですね、複雑そうですが、勉強させていただきます。 本当にありがとうございました。