Question

0

71

Views

How to check/uncheck checkbox by clicking outside specific block?

So I have a div that appears/disappears on clicking checkbox.


    <input type="checkbox" id="btn">
    <div id="box"></div>

    #box {
        display: none;
        width: 100px;
        height: 100px;
    }

    #btn:checked + #box
        display: block;
    }

But I also want to add an option to close it by clicking anywhere outside this box. How can I do it?

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-06-28T04:57:48.725Z

Check the below code. You can use label for to achieve this behavior. You click a box outside of checkbox and it gets checked as you wanted.

label {
  display: block;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background: limegreen;
}

#btn:checked~#box {
  display: block;
}

#box {
  margin-top: 50px;
  display: none;
  width: 200px;
  height: 200px;
  background: red;
}

<input type="checkbox" id="btn">
<label for="btn"></label>

<div id="box">
</div>