/ / Listen to bootstrap checkbox being checked - javascript, jquery, html, twitter-bootstrap

Ouça a caixa de verificação de bootstrap a ser verificada - javascript, jquery, html, twitter-bootstrap

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>

Este é o resultado: insira a descrição da imagem aqui

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> elemento.

How could I listen to checkbox being checked?

Respostas:

8 para resposta № 1
$("input#Checkbox1").change(function () {
if ($("input#Checkbox1").is(":checked")) {
$("input#Checkbox1").addClass("checked");
} else {
$("input#Checkbox1").removeClass("checked");
}
});

i solve it that way.


3 para resposta № 2

The template looks to be using https://github.com/fronteed/iCheck/, which has callbacks:

$("input[type="checkbox"][name="userAccessNeeded"]").on("ifChecked", function(event){
alert(event.type + " callback");
});

Or there is also:

$("input[type="checkbox"][name="userAccessNeeded"]").iCheck("check", function(){
alert("Well done, Sir");
});

Which should work with a whole range of methods:

// change input"s state to "checked"
$("input").iCheck("check");

// remove "checked" state
$("input").iCheck("uncheck");

// toggle "checked" state
$("input").iCheck("toggle");

// change input"s state to "disabled"
$("input").iCheck("disable");

// remove "disabled" state
$("input").iCheck("enable");

// change input"s state to "indeterminate"
$("input").iCheck("indeterminate");

// remove "indeterminate" state
$("input").iCheck("determinate");

// apply input changes, which were done outside the plugin
$("input").iCheck("update");

// remove all traces of iCheck
$("input").iCheck("destroy");

3 para resposta № 3

Isso funcionou para mim

jQuery("input.icheck").on("ifChanged", function (event) {
if ($(this).prop("checked")) {
alert("checked");
} else {
alert("unchecked");
}
});

2 para resposta № 4

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);
});

2 para resposta № 5

Just my five cents, if anyone would have the same problem..

I needed the exact checkbox states. Toggle not worked here. This one has done the required state delivery for me:

$(".iCheck-helper").click(function () {
var checkbox = $(this).parent();
if (checkbox.hasClass("checked")) {
checkbox.first().addClass("checked");
} else {
checkbox.first().removeClass("checked");
}
doWhateverAccordingToChoices();
});

2 para resposta № 6

Link to the Documentation: http://fronteed.com/iCheck/

You need to bind to the ifchecked event via

Use on() method to bind them to inputs:

$("input").on("ifChecked", function(event){
alert(event.type + " callback");
});

this will change the checked state

$("input").iCheck("check"); — change input"s state to checked

1 para resposta № 7

@Srihari got it right except the selector. Indeed the input não é modificado onclick, mas o div Faz :

$(".icheckbox_flat-aero").click(function(){
$(this).find("input:checkbox").toggleClass("checked"); // or .find(".icheck").
});

1 para resposta № 8

Hey i hope this logic should work for you

CÓDIGO JS:

$(".icheckbox_flat-aero").on("click",function(){
var checkedId=$(this,"input").attr("id");
alert(checkedId);
});

This way a general event is added for all the checkbox`s

Codificação Feliz :)


1 para resposta № 9

Looking at your question and working with bootstrap since the past 1 year, I can definitely say that the checked class being added is not done by bootstrap. Neither is the checked class being added is a property which is built into BS 2.3.*.

Yet for your specific question try the following code.

$(".icheck").click(function(){
$(this).toggleClass("checked");
});

You can get a working example Aqui.

Atualização 1: The Checkbox cannot be styled by color using CSS. Hence, the developer is using insert tag to delete the Checkbox and put in his styling code. In effect, the CSS and JS in the specified theme do the styling by putting in the new stylized code.

Instead you can listed to the click event on the div icheckbox_flat-aero.

$(".icheckbox_flat-aero").children().on("click",function(){
alert("checked");
});

Check for the example http://jsfiddle.net/hunkyhari/CVJhe/1/