Toggle checkbox - click on parent DIV element

Question

I have few div elements and inside every div one checkbox. On click this div I want to check/uncheck checkbox and add class like active or checked. Have some code if you have any idea.

<div class="filter">
    <div id="select_10">
       <input type="checkbox" name="what" />
       visible1
    </div>
    <div id="select_91">
       <input type="checkbox" name="ever" />
       visible2
    </div>
    <div id="select_101">
       <input type="checkbox" name="whatever" />
       visible3
    </div>    
</div>

using this code:

$(document).on("click", "div.filter div", function (event) {
    var target = $(event.target);
    var id = $(this)attr('id');
    if (target.is('div#'+id+' input:checkbox')) {
        return;
    }
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.prop("checked", !checkbox.is(':checked'));
});

Perfect sunny time to use <label> instead of <div>

Roko C. Buljan
– Roko C. Buljan

2016-03-17 19:20:38 +00:00
Commented Mar 17, 2016 at 19:20 — Roko C. Buljan
– Roko C. Buljan, Commented Mar 17, 2016 at 19:20
I will check - thanks :)

Tadeusz Majkowski
– Tadeusz Majkowski

2016-03-17 19:24:45 +00:00
Commented Mar 17, 2016 at 19:24 — Tadeusz Majkowski
– Tadeusz Majkowski, Commented Mar 17, 2016 at 19:24

Roko C. Buljan · Accepted Answer · 2016-03-17 19:35:39Z

5

$(this)attr('id'); should have a . like in

$(this).attr('id');

That's it.

Why using DIV and JS when we have <label> for that purpose!

.filter label {
  cursor: pointer;
  display: block;
  background: #eee;
  margin:5px; padding: 10px;
}

<div class="filter">
  <label id="select_10">
    <input type="checkbox" name="what" />
    visible1
  </label>
  <label id="select_91">
    <input type="checkbox" name="ever" />
    visible2
  </label >
  <label id="select_101">
    <input type="checkbox" name="whatever" />
    visible3
  </label >    
</div>

all you need. Style label as you would for your DIV by just adding eventually display: block;

Or you can even move the inputs before the label and style the complete LABEL elements in pure CSS:

.filter input{
  position: absolute;
  visibility: hidden;
}

.filter label {
  cursor: pointer;
  display: block;
  margin:5px; padding: 10px;
  background: #eee;
}

.filter input:checked + label{
  background: #cf5;
}

.filter                 label:before{content: "\2610";}
.filter input:checked + label:before{content: "\2611";}

<div class="filter">
  
  <input  id="ckb_10" type="checkbox" name="what" />
  <label for="ckb_10">
    what
  </label>
  
  <input  id="ckb_91" type="checkbox" name="foo" />
  <label for="ckb_91">
    foo
  </label>
  
</div>

edited Mar 17, 2016 at 19:35

answered Mar 17, 2016 at 19:21

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tadeusz Majkowski Over a year ago

One dot and so much happiness

Roko C. Buljan Over a year ago

@TadeuszMajkowski hahahaaha I know happens to me all the time, but than I open Developer tools and I see my errors!

Roko C. Buljan Over a year ago

@TadeuszMajkowski strange my Netbeans would burn me alive if it noticed such error.

Roko C. Buljan Over a year ago

@TadeuszMajkowski you'e welcome. I've expanded my answer in the meantime, You might check the added content.

Tadeusz Majkowski Over a year ago

Ohhh You already add checked style - want to do it for myselft but I will check your solution :)

|

Collectives™ on Stack Overflow

Toggle checkbox - click on parent DIV element

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related