teratail
回答率
85.48%
質問するログイン新規登録
トップPHPに関する質問複数のボタンの中からどれか一つ（or複数）を選択し、送信ボタンを押すことで、送信先のページで選択されたボタンがどのボタンなのかを確認する方法について

編集履歴

回答編集履歴

4

全部

2018/08/27 02:34

投稿

yambejp
yambejp

スコア114769

test CHANGED
@@ -35,3 +35,97 @@
35
35
  ```
36
36
 
37
37
  ※不要なjavascriptの表記があったので削除しました
38
+
39
+
40
+
41
+ # フルバージョン
42
+
43
+ ```CSS
44
+
45
+ [name="c[]"]{display:none;}
46
+
47
+ [name="c[]"]:checked + .cx{background-Color:red;}
48
+
49
+ ```
50
+
51
+ ```javacript
52
+
53
+ window.addEventListener('DOMContentLoaded', function(e){
54
+
55
+ document.querySelector('#f1').addEventListener('submit',function(e){
56
+
57
+ var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){
58
+
59
+ return x.value;
60
+
61
+ }).join(",");
62
+
63
+ if(c===""){
64
+
65
+ alert("not checked");
66
+
67
+ e.preventDefault();
68
+
69
+ }else{
70
+
71
+ if(!confirm(c+" checked. OK?")){
72
+
73
+ e.preventDefault();
74
+
75
+ }
76
+
77
+ }
78
+
79
+ });
80
+
81
+ [].forEach.call(document.querySelectorAll('.cx'),function(x){
82
+
83
+ x.addEventListener('click',function(e){
84
+
85
+ var t=e.target;
86
+
87
+ var n=document.querySelector('#c'+t.value);
88
+
89
+ n.checked=!n.checked;
90
+
91
+ });
92
+
93
+ });
94
+
95
+ });
96
+
97
+ ```
98
+
99
+ ```PHP
100
+
101
+
102
+
103
+ <?PHP
104
+
105
+ $c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
106
+
107
+ if(!is_null($c)){
108
+
109
+ print "checked:".implode(",",$c)."<br>";
110
+
111
+ }
112
+
113
+ ?>
114
+
115
+ <form method="get" id="f1">
116
+
117
+ <input type="checkbox" name="c[]" id="c1" value="1"><input type="button" value="1" class="cx">
118
+
119
+ <input type="checkbox" name="c[]" id="c2" value="2"><input type="button" value="2" class="cx">
120
+
121
+ <input type="checkbox" name="c[]" id="c3" value="3"><input type="button" value="3" class="cx">
122
+
123
+ <input type="checkbox" name="c[]" id="c4" value="4"><input type="button" value="4" class="cx">
124
+
125
+ <input type="checkbox" name="c[]" id="c5" value="5"><input type="button" value="5" class="cx"><br>
126
+
127
+ <input type="submit" value="go">
128
+
129
+ </form>
130
+
131
+ ```

3

調整

2018/08/27 02:34

投稿

yambejp
yambejp

スコア114769

test CHANGED
@@ -22,15 +22,15 @@
22
22
 
23
23
  ```html
24
24
 
25
- <input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked"></label>
25
+ <input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked">
26
26
 
27
- <input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked"></label>
27
+ <input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked">
28
28
 
29
- <input type="checkbox" name="c" id="c3" value="3"><input type="button" value="3" onclick="document.querySelector('#c3').checked=!document.querySelector('#c3').checked"></label>
29
+ <input type="checkbox" name="c" id="c3" value="3"><input type="button" value="3" onclick="document.querySelector('#c3').checked=!document.querySelector('#c3').checked">
30
30
 
31
- <input type="checkbox" name="c" id="c4" value="4"><input type="button" value="4" onclick="document.querySelector('#c4').checked=!document.querySelector('#c4').checked"></label>
31
+ <input type="checkbox" name="c" id="c4" value="4"><input type="button" value="4" onclick="document.querySelector('#c4').checked=!document.querySelector('#c4').checked">
32
32
 
33
- <input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked"></label>
33
+ <input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked">
34
34
 
35
35
  ```
36
36
 

2

調整

2018/08/27 02:04

投稿

yambejp
yambejp

スコア114769

test CHANGED
@@ -22,24 +22,6 @@
22
22
 
23
23
  ```html
24
24
 
25
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
26
-
27
- <script>
28
-
29
- </script>
30
-
31
- <input type="radio" name="r" id="r1" value="1"><input type="button" value="1" onclick="document.querySelector('#r1').checked=true"></label>
32
-
33
- <input type="radio" name="r" id="r2" value="2"><input type="button" value="2" onclick="document.querySelector('#r2').checked=true"></label>
34
-
35
- <input type="radio" name="r" id="r3" value="3"><input type="button" value="3" onclick="document.querySelector('#r3').checked=true"></label>
36
-
37
- <input type="radio" name="r" id="r4" value="4"><input type="button" value="4" onclick="document.querySelector('#r4').checked=true"></label>
38
-
39
- <input type="radio" name="r" id="r5" value="5"><input type="button" value="5" onclick="document.querySelector('#r5').checked=true"></label>
40
-
41
- <hr>
42
-
43
25
  <input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked"></label>
44
26
 
45
27
  <input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked"></label>
@@ -51,3 +33,5 @@
51
33
  <input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked"></label>
52
34
 
53
35
  ```
36
+
37
+ ※不要なjavascriptの表記があったので削除しました

1

追記

2018/08/27 02:02

投稿

yambejp
yambejp

スコア114769

test CHANGED
@@ -17,3 +17,37 @@
17
17
  <input type="radio" name="r" id="r5" value="5"><input type="button" value="5" onclick="document.querySelector('#r5').checked=true"></label>
18
18
 
19
19
  ```
20
+
21
+ # チェックボックスバージョン
22
+
23
+ ```html
24
+
25
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
26
+
27
+ <script>
28
+
29
+ </script>
30
+
31
+ <input type="radio" name="r" id="r1" value="1"><input type="button" value="1" onclick="document.querySelector('#r1').checked=true"></label>
32
+
33
+ <input type="radio" name="r" id="r2" value="2"><input type="button" value="2" onclick="document.querySelector('#r2').checked=true"></label>
34
+
35
+ <input type="radio" name="r" id="r3" value="3"><input type="button" value="3" onclick="document.querySelector('#r3').checked=true"></label>
36
+
37
+ <input type="radio" name="r" id="r4" value="4"><input type="button" value="4" onclick="document.querySelector('#r4').checked=true"></label>
38
+
39
+ <input type="radio" name="r" id="r5" value="5"><input type="button" value="5" onclick="document.querySelector('#r5').checked=true"></label>
40
+
41
+ <hr>
42
+
43
+ <input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked"></label>
44
+
45
+ <input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked"></label>
46
+
47
+ <input type="checkbox" name="c" id="c3" value="3"><input type="button" value="3" onclick="document.querySelector('#c3').checked=!document.querySelector('#c3').checked"></label>
48
+
49
+ <input type="checkbox" name="c" id="c4" value="4"><input type="button" value="4" onclick="document.querySelector('#c4').checked=!document.querySelector('#c4').checked"></label>
50
+
51
+ <input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked"></label>
52
+
53
+ ```