アプリ版：「スタンプのみでお礼する」機能のリリースについて

checkboxの選択数制限と排他処理について

解決済

  • 質問者：ilir
  • 質問日時：
  • 回答数：6件

javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が５つの中から正しいものをチェックし送信するというものです。
その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。
選択数に制限をかけることや排他処理（ラジオボタン）は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。
どうかよろしくお願い致します。
<html>
<head>
<script type="text/javascript">
function check(f,o,m){
var c = i = 0, b = f.elements;
for (i; i < b.length; i++)
if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o)
c++;
for (i = 0; i < b.length; i++)
if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o)
b[i-2].checked=false;// これだと２つ前ではなく2番目のチェックボックスが排他になります。

}
</script>
</head>
<body>
<form action="#" id="sampleform" onclick="check(this,'options',2);">
<fieldset id="options"><input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
</fieldset>
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： yambejp
  • 回答日時：

私の理解がまちがっていたらごめんなさい。



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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

さっそくのご回答ありがとうございます
初めて利用させていただいたのですが回答の早さに驚きました。ありがとうございます

通報する
お礼日時：2011/01/24 23:26

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＞最初にチェックした方のチェックボックスのチェックが外れるという仕組み


というためには、チェックした順番を記憶しておく必要があります。

ごく簡単な例
* 必ず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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。まさに上記のような動作を考えておりました。配列のレコードを使用するのですね、複雑そうですが、勉強させていただきます。
本当にありがとうございました。

通報する
お礼日時：2011/01/24 23:50

No.3

  • 回答者： babu_baboo
  • 回答日時：

そんなのひるめしまえだぁ～！　とおもったら、すぎていた。


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>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

＃３です。

ひるめしたべてながめたら、みすはっけん！

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さんに近いか？）
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。お忙しい中、こんなに手を貸していただいて本当にすいません
もう少し勉強させていただきます。

通報する
お礼日時：2011/01/24 23:55

No.6

  • 回答者： taloo
  • 回答日時：

>その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。



どの順番でチェックしたかというのを変数（バッファ）に保存しておいて、
2つ以上チェックされたら、そのバッファの古い方からチェックを外していく、という考え方で良いと思います。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報