電子書籍の厳選無料作品が豊富！

チェックボックスの全選択・全解除を一つにまとめたい

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：2件

http://shoyu-ramen23.jugem.jp/?eid=184を参考にチェックボックスの全選択・全解除をつけました。
ただし、上記のサンプルは全選択ボタン、全解除ボタンと二つに分かれている為、これを一つにしたいと思ったのですが、どうすればできるかわからなかったので、
アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

【やりたい事】
1. 最初は「全て選択」ボタンのみ表示したいです。
2. 「全て選択」ボタンをクリックすると、「全て選択」ボタンが消え、代わりに「全て解除」ボタンを表示したいです(1回目,3回目,5回目・・・のクリックはこの動作)。
2. 「全て解除」ボタンをクリックすると、「全て解除」ボタンが消え、代わりに「全て選択」ボタンを表示したいです(2回目,4回目,6回目・・・のクリックはこの動作)。



【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>タイトル</title>
<script type="text/javascript">
function allcheck(targetForm,flag){
for(n=0;n<=targetForm.length-1;n++){
if(targetForm.elements[n].type == "checkbox"){
targetForm.elements[n].checked = flag;
}
}
}
</script>
</head>
<body>
<form action="test.php" method="post">
<table>
<tr>
<td>
<input type="button" onclick="allcheck(this.form,true)" value="全て選択"><br />
<input type="button" onclick="allcheck(this.form,false)" value="全て解除"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check1" name="data[check1]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check2" name="data[check2]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check3" name="data[check3]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check4" name="data[check4]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check5" name="data[check5]"></td>
</tr>
</table>
</form>
</body>
</html>

以上、よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： shiren2
  • 回答日時：

これでどうでしょう。




function toggle_check(form, button){
if(button.value=="全て選択"){
var flag = 1;
button.value = "全て解除";
}else{
var flag = 0;
button.value = "全て選択";
}

for(i=0; i<form.length; i++){
if(form.elements[i].type == "checkbox")
form.elements[i].checked = flag;
}
}

<input type="button" onclick="toggle_check(this.form,this)" value="全て選択">
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースで意図した動作になりました。

このたびはどうもありがとうございました。

通報する
お礼日時：2010/12/26 09:58

No.1

  • 回答者： tmsen
  • 回答日時：

無理

    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報