how to check checkbox on div click in chrome extension

Question

I currently have this layout:

<div class="row">
    <div class="col-lg-12">

        <div class="input-group">
            <div class="input-group-addon">
                <input class="checkboxOption" type="checkbox">
            </div>
            <div class="form-control">Clinical Pharmacology (sub req'd)</div>
        </div><!--input-group-->

        <div class="input-group">
            <div class="input-group-addon">
                <input class="checkboxOption" type="checkbox">
            </div>
            <div class="form-control">Clinicaltrials.gov</div>
        </div><!--input-group-->
    </div>
</div>

and I want to be able to just click the input-group or the form-control and check the checkbox nested inside.

I currently have this in my popup.js:

$(".form-control").on("touchstart", checkInside);

function checkInside(e) {
    var box = $(".input-group > .input-group-addon > .checkboxOption");
    if(box.checked){
        box.attr('checked', false);
     } else{
         box.attr('checked', true);
     }
 }

but when I place console.log statements in the function, it seems as if the click isn't even registering. is there another approach to this, or something else?

Touchstart? http://stackoverflow.com/questions/9389968/jquery-touchstart-in-browser — Digital Chris, Sep 08 '14 at 16:22

score 1 · Accepted Answer · answered Sep 08 '14 at 16:35

1

I've made a Jsfiddle here

use :

prop('checked', false);

instead of :

box.attr('checked', false);

touchstart will work only on mobile (or debug mode).

answered Sep 08 '14 at 16:35

Thom-x

841
1
6
20

thank you so much. this is the answer i am looking for. there are a LOT of checkboxes, changing the html would not be fun – BBH1023 Sep 08 '14 at 16:40

score 0 · Answer 2 · answered Sep 08 '14 at 16:26

What you want can be achieved with <label> elements tied to the ids of the checkboxes. Basically wrap a <label> around everything you want to be able to click to check a checkbox, and add for="checkboxID" where checckboxID is the id of the checkbox.

Here's a fiddle.

score 0 · Answer 3 · answered Sep 08 '14 at 16:26

You don't really need jQuery or Javascript to make it work.

Example:

<input id="checkboxID" type="checkbox" />
<label for="checkboxID">This will check/uncheck the checkbox with the ID 'checkboxID' if clicked</label>

or

<input id="checkboxID2" type="checkbox" />
<div>
   <label for="checkboxID2">This will check/uncheck the checkbox with the ID 'checkboxID2' if clicked</label>
</div>

jsFiddle

how to check checkbox on div click in chrome extension

3 Answers3