0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="checkbox"/>
    <div style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>

For example. I want to click on the red box and make the checkbox toggle.

mojito000
  • 55
  • 1
  • 5

1 Answers1

1

You could surround the div containing the background color in a label pointing to the checkbox you wish to toggle. The label's for attribute will contain the id of the checkbox.

.myDiv {
  width: 100px; 
  height: 100px; 
  background-color: red;
  margin-top: 1em;
  cursor: pointer;
}
<label for="myCheckbox">
  <div class="myDiv"></div>
</label>
<input id="myCheckbox" type="checkbox" />
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61