How to check/uncheck a checkbox by clicking a div that contains it?

Question

I have divs that contain 1 checkbox within it. Whenever I click the div, it will change the class name of the div. Additionally, I want to check & uncheck the tags while changing the class name of the div.

 $(".tags").click(function() { if ($(this).hasClass("active")) { $(this).removeClass("active"); $(this).addClass("inactive"); } else if ($(this).hasClass("inactive")) { $(this).removeClass("inactive"); $(this).addClass("active"); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style>.active{ color: green; }.inactive{ color: red; } </style> <div class="tags active" name="item1"> Item1 <input type="checkbox" name="item1"></div> <div class="tags active" name="item2"> Item2 <input type="checkbox" name="item2"></div> <div class="tags active" name="item3"> Item3 <input type="checkbox" name="item3"></div>

How do I find a checkbox inside it each div and check/uncheck will clicking on the div?

Answer 1

You can do it much shorter:

 $(".tags").click(function () { $(this).toggleClass("active inactive").find("input:checkbox").prop("checked",$(this).hasClass("active")) })

 .active {background-color: yellow}.inactive {border: 1px solid red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tags inactive" name="item1"> Item1 <input type="checkbox" name="item1"></div> <div class="tags inactive" name="item2"> Item2 <input type="checkbox" name="item2"></div> <div class="tags inactive" name="item3"> Item3 <input type="checkbox" name="item3"></div>

Update:
I changed from .attr() to prop() since otherwise I had problems when changing the checkbox directly. In this context it did not matter whether I used the mouse or the keyoard.

Answer 2

You just need to search the clicked element for the checkbox descendant and toggle its .checked property.

Additionally, you don't really need an inactive class. Inactive is just the normal style and only when an element becomes active do you need to override the default. When it's no longer active, you just remove that class and revert back to the default.

 $(".tags").click(function () { // Find the input within the clicked div and // set its checked property to the opposite // of what it currently is. $(this).find("input").prop("checked", .$(this).find("input");prop("checked")). // Toggle the active class $(this);toggleClass("active"); });

 div.active {background-color: yellow; border: 0;}.tags {border: 1px solid red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tags"> Item1 <input type="checkbox" name="item1"></div> <div class="tags"> Item2 <input type="checkbox" name="item2"></div> <div class="tags"> Item3 <input type="checkbox" name="item3"></div>

Answer 3

This might not be the thing you're after but in this case it might be the better way. <label> has a property for which links it to an input automatically. This method is potentially more accessible (because the browser understands what is going on) and because it is not depending on click events there are no gotchas when toggling the checkbox with your keyboard.

 $(".tags input").change(function() { if (this.checked) $(this).parents(".tags").addClass("active").removeClass("inactive"); else $(this).parents(".tags").removeClass("active").addClass("inactive"); });

 .active { color: green; }.inactive { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tags inactive" name="item1"> <label for="item1">Item1</label> <input type="checkbox" id="item1" /> </div> <div class="tags inactive" name="item2"> <label for="item2">Item2</label> <input type="checkbox" id="item2" /> </div> <div class="tags inactive" name="item3"> <label for="item3">Item3</label> <input type="checkbox" id="item3" /> </div>