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>
以上、よろしくお願いします。
No.2ベストアンサー
- 回答日時:
これでどうでしょう。
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="全て選択">
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
JavaScriptの「.querySelectorA...
-
JavaScriptでリストボックスに...
-
onClickで足し算をして答えを出...
-
formで項目を連結したい
-
画面の2重起動をチェックする...
-
Formのシリアライズができない
-
jQueryで合計を出したい
-
Javascriptの電卓で最初の何も...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
<JavaScript>tableタグを入力不...
-
【javascript・PHP】プルダウン...
-
javaScriptの変数をJavaの変数...
-
プルダウン 項目が多いので先頭...
-
HTMLコンボボックスへの項目追加
-
同名ボタンのクリック時要素番...
-
連動プルダウンのclonenode
-
slickのレスポンシブ > center...
-
複数のプルダウンを1つにまとめ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
JavaScriptの「.querySelectorA...
-
formで項目を連結したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
文字数を数える際に空白、改行...
-
クリックしたラジオボタンの行...
-
ラジオボタンを一括で操作する...
-
画面の2重起動をチェックする...
-
ラジオボタンとテキストボック...
-
Javascriptの電卓で最初の何も...
-
入力チェックの外部スクリプト...
-
JavaScriptによる自動計算フォーム
-
複数のselect値で1つも選択され...
-
javascriptで表(テーブル)の自...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptで、コピーボタンを...
-
Javascriptで自動的に計算する...
-
WEBフォーム(asp)から画像デ...
おすすめ情報