回答編集履歴

1

checkbox

2018/09/07 07:49

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -37,3 +37,61 @@
37
37
  </div>
38
38
 
39
39
  ```
40
+
41
+
42
+
43
+ # checkboxのように消せる
44
+
45
+ ```javascript
46
+
47
+ <script>
48
+
49
+ window.addEventListener('DOMContentLoaded', function(e){
50
+
51
+ [].forEach.call(document.querySelectorAll('[type=radio][name^=year]'),function(x){
52
+
53
+ var flg=true;
54
+
55
+ x.addEventListener('focus',function(e){
56
+
57
+ if(!x.checked) flg=false;
58
+
59
+ });
60
+
61
+ x.addEventListener('click',function(e){
62
+
63
+ if(x.checked && flg) x.checked=false;
64
+
65
+ flg=!flg;
66
+
67
+ });
68
+
69
+ x.addEventListener('change',function(e){
70
+
71
+ [].forEach.call(document.querySelectorAll('[type=radio][name^=year]:checked'),function(y){
72
+
73
+ y.checked=(y===x);
74
+
75
+ });
76
+
77
+ });
78
+
79
+ });
80
+
81
+ });
82
+
83
+ </script>
84
+
85
+ <div class="form-list">
86
+
87
+ <p>年数</p>
88
+
89
+ <label><input type="radio" name="year1" value="2年">2年</label>
90
+
91
+ <label><input type="radio" name="year2" value="3年">3年</label>
92
+
93
+ <label><input type="radio" name="year3" value="4年">4年</label>
94
+
95
+ </div>
96
+
97
+ ```