Skip to content

Commit bfb445a

Browse files
tannerwelshtannerwelsh
committed
Add checkbox example code (DOM traversal / manipulation)
1 parent 439b38f commit bfb445a

File tree

1 file changed

+225
-0
lines changed

1 file changed

+225
-0
lines changed

‎session-notes/2015-03-07/checkbox_practice.html

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<body>
2+
<h1>Locations</h1>
3+
<form>
4+
<ul>
5+
<div id="location-list" class="accordion-container">
6+
<h2>
7+
<li>Chicago</li>
8+
</h2>
9+
<ul>
10+
<div class="accordion-container">
11+
<h3>
12+
<li>one</li>
13+
</h3>
14+
<table>
15+
<tr>
16+
<th>IP Address</th>
17+
<th>DNS Name</th>
18+
<th>Status</th>
19+
<th>Comments</th>
20+
</tr>
21+
<tr>
22+
<td>192.198.0.1</td>
23+
<td>bob</td>
24+
<td>
25+
<input type="text" value="Blue is tired" disabled>
26+
</td>
27+
<td>
28+
<input type="text" value="Blue is a unique server" disabled>
29+
</td>
30+
<td>
31+
<input type="checkbox">
32+
</td>
33+
</tr>
34+
<tr>
35+
<td>192.198.0.2</td>
36+
<td>steve</td>
37+
<td>
38+
<input type="text" value="beast is tired" disabled>
39+
</td>
40+
<td>
41+
<input type="text" value="beast is a unique host" disabled>
42+
</td>
43+
<td>
44+
<input type="checkbox">
45+
</td>
46+
</tr>
47+
</table>
48+
<h3>
49+
<li>two</li>
50+
</h3>
51+
<table>
52+
<tr>
53+
<th>IP Address</th>
54+
<th>DNS Name</th>
55+
<th>Status</th>
56+
<th>Comments</th>
57+
</tr>
58+
<tr>
59+
<td>192.198.1.1</td>
60+
<td>bob</td>
61+
<td>
62+
<input type="text" value="UP" disabled>
63+
</td>
64+
<td>
65+
<input type="text" value="I love coding" disabled>
66+
</td>
67+
<td>
68+
<input type="checkbox">
69+
</td>
70+
</tr>
71+
</table>
72+
<h3>
73+
<li>three</li>
74+
</h3>
75+
<table>
76+
<tr>
77+
<th>IP Address</th>
78+
<th>DNS Name</th>
79+
<th>Status</th>
80+
<th>Comments</th>
81+
</tr>
82+
<tr>
83+
<td>192.198.2.1</td>
84+
<td>bob</td>
85+
<td>
86+
<input type="text" value="Down" disabled>
87+
</td>
88+
<td>
89+
<input type="text" value="Javascript is down" disabled>
90+
</td>
91+
<td>
92+
<input type="checkbox">
93+
</td>
94+
</tr>
95+
</table>
96+
</div>
97+
</ul>
98+
<h2>
99+
<li>St. Louis</li>
100+
</h2>
101+
<ul>
102+
<div class="accordion-container">
103+
<h3>
104+
<li>one</li>
105+
</h3>
106+
<table>
107+
<tr>
108+
<th>IP Address</th>
109+
<th>DNS Name</th>
110+
<th>Status</th>
111+
<th>Comments</th>
112+
</tr>
113+
<tr>
114+
<td>192.198.2.1</td>
115+
<td>bob</td>
116+
<td>
117+
<input type="text" value="Down" disabled>
118+
</td>
119+
<td>
120+
<input type="text" value="Javascript is down" disabled>
121+
</td>
122+
<td>
123+
<input type="checkbox">
124+
</td>
125+
</tr>
126+
</table>
127+
<h3>
128+
<li>two</li>
129+
</h3>
130+
<table>
131+
<tr>
132+
<th>IP Address</th>
133+
<th>DNS Name</th>
134+
<th>Status</th>
135+
<th>Comments</th>
136+
</tr>
137+
<tr>
138+
<td>192.198.2.1</td>
139+
<td>bob</td>
140+
<td>
141+
<input type="text" value="Down" disabled>
142+
</td>
143+
<td>
144+
<input type="text" value="Javascript is down" disabled>
145+
</td>
146+
<td>
147+
<input class="save-ip" type="checkbox">
148+
</td>
149+
</tr>
150+
</table>
151+
<h3>
152+
<li>three</li>
153+
</h3>
154+
<table>
155+
<tr>
156+
<th>IP Address</th>
157+
<th>DNS Name</th>
158+
<th>Status</th>
159+
<th>Comments</th>
160+
</tr>
161+
<tr>
162+
<td>192.198.2.1</td>
163+
<td>bob</td>
164+
<td>
165+
<input type="text" value="Down" disabled>
166+
</td>
167+
<td>
168+
<input type="text" value="Javascript is down" disabled>
169+
</td>
170+
<td>
171+
<input type="checkbox">
172+
</td>
173+
</tr>
174+
</table>
175+
</div>
176+
</ul>
177+
<h2>
178+
<li>San Fran</li>
179+
</h2>
180+
<ul>
181+
<h3>
182+
<li>one</li>
183+
</h3>
184+
<h3>
185+
<li>two</li>
186+
</h3>
187+
<h3>
188+
<li>three</li>
189+
</h3>
190+
</ul>
191+
</div>
192+
</ul>
193+
</form>
194+
195+
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
196+
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
197+
<script>
198+
$(document).ready(function() {
199+
$('.accordion-container').accordion();
200+
201+
// DOM selection
202+
// - tag name
203+
// => $('li')
204+
// - id attribute
205+
// => $('#location-list')
206+
// - class attribute
207+
// => $('.accordion-container')
208+
209+
// ['b', 'c', 'd'].each_with_index do |letter, index|
210+
// puts index
211+
// puts letter
212+
// end
213+
214+
$('.save-ip').each(function(index, checkbox) {
215+
console.log($(checkbox).attr('checked', true))
216+
});
217+
});
218+
219+
// var checkbox = document.querySelectorAll("input[type=checkbox]");
220+
// console.log(checkbox);
221+
// for (var i = 0; i < checkbox.length; i++) {;
222+
// console.log(checkbox[i]);
223+
// }
224+
</script>
225+
</body>

0 commit comments

Comments
 (0)