html checker

1<style>
2#checker{
3  display:flex;
4  flex-direction:column;
5}
6
7.row{
8  display:flex;
9}
10.row div{
11  width:50px;
12  height:50px;
13  border:solid;
14  border-width:1px;
15}
16
17.row1 div:nth-child(odd){
18  background-color:black;
19}
20
21.row2 div:nth-child(even){
22  background-color:black;
23}
24</style>
25
26<div id='checker'>
27  <div class='row row1'> 
28     <div></div>
29     <div></div>
30     <div></div>
31     <div></div>
32     <div></div>
33  </div>
34    <div class='row row2'> 
35     <div></div>
36     <div></div>
37     <div></div>
38     <div></div>
39     <div></div>
40  </div>
41     <div class='row row1'> 
42     <div></div>
43     <div></div>
44     <div></div>
45     <div></div>
46     <div></div>
47  </div>
48  <div class='row row2'> 
49     <div></div>
50     <div></div>
51     <div></div>
52     <div></div>
53     <div></div>
54  </div>
55    <div class='row row1'> 
56     <div></div>
57     <div></div>
58     <div></div>
59     <div></div>
60     <div></div>
61  </div>
62</div>

1<input type="checkbox">