Question

188

Listen to bootstrap checkbox being checked

rated 0 times [ 189] [ 1] / answers: 1 / hits: 46688 / 11 Years ago, tue, july 30, 2013, 12:00:00

I am using bootstrap theme called: Core Admin
http://wrapbootstrap.com/preview/WB0135486

This is the code I write:

<div class=span6>

    <input type=checkbox class=icheck id=Checkbox1 name=userAccessNeeded>

    <label for=icheck1>Needed</label>

</div>

And bootstrap generates me this code:

<div class=span6>

<div class=icheckbox_flat-aero style=position: relative;>

    <input type=checkbox class=icheck id=Checkbox7 name=userAccessNeeded style=position: absolute; opacity: 0;>

    <ins class=iCheck-helper style=position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;></ins>

</div>

<label for=icheck1 class=>Needed</label>

This is the result: enter

So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checked class to the div:

 <div class=icheckbox_flat-aero checked style=position: relative;>

So at first I wanted to listen the input field being changed like this

$('input[type=checkbox][name=userAccessNeeded]').change(function () {

    if (this.checked) {



    }

});

But it doesn't actually change the input field, but rather changes the class of <div> element.

How could I listen to checkbox being checked?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

blair questions

1 Ant design Form.Item validation style

Sat, Feb 12, 22, 00:00, 2 Years ago

1 Option useFindAndModify is not supported

Wed, Aug 25, 21, 00:00, 3 Years ago

1 Discord.js | Buttons doesn't work after bot restarts

Sat, Jul 10, 21, 00:00, 3 Years ago

1 pass custom event properties with fireEvent (testing-library and jest)

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Change NavLink text Color onClick

Tue, Aug 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago kaitlynd · Accepted Answer

Finally solved it like this, since I am clicking on a div element, then I must listen click event of that, and then check if the div has class and what is the id of checkbox.

 $('.iCheck-helper').click(function () {

    var parent = $(this).parent().get(0);

    var checkboxId = parent .getElementsByTagName('input')[0].id;

    alert(checkboxId);

});