Jquery Checkbox Checked State Changed Event

jQuery checkbox checked state changed event

Bind to the change event instead of click. However, you will probably still need to check whether or not the checkbox is checked:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state. If you only want to capture events that cause the checkbox to change state, you want the aptly-named change event. Redacted in comments

Also note that I've used this.checked instead of wrapping the element in a jQuery object and using jQuery methods, simply because it's shorter and faster to access the property of the DOM element directly.

Edit (see comments)

To get all checkboxes you have a couple of options. You can use the :checkbox pseudo-selector:

$(":checkbox")

Or you could use an attribute equals selector:

$("input[type='checkbox']")

jQuery checkbox change and click event

Tested in JSFiddle and does what you're asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

Updated Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Original Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

Need checkbox change event to respond to change of checked state done programmatically

Use jquery click() to change the state of the checkbox rather than changing its attribute.

Not having all your markup I'm not sure how suitable this would be, but I've used this method recently to good effect.

Catch checked change event of a checkbox

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

Edit: Doing this will not catch when the checkbox changes for other reasons than a click, like using the keyboard. To avoid this problem, listen to changeinstead of click.

For checking/unchecking programmatically, take a look at Why isn't my checkbox change event triggered?

Check when a checkbox has its state changed on Javascript

Using jQuery checkbox checked state changed event:

$("#i").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Since you're adding the elements dynamically, a more robust solution might be to use this (thanks to @IgorAntun for mentioning bind and on):

$(document).on("change", "#i", function() { 
    if(this.checked) {
        //Do stuff
    }
});

To add context to the comments: The above examples previously used the selector $("[name='i']"), because I was treating checkbox.name = i like a string, instead of the variable that it was.

With regards to making each checkbox appear on a new line, you could <p></p> tags, <br /> tags, <div></div> tags-- really any tag that groups elements or has spacing. Additionally, you could use CSS. This method is my favorite, because it allows the spacing of the checkboxed to be adjusted, which you can't do with HTML tags.

input {
    display: block;
    margin-top: 2px;
}

jquery select all checkbox doesn't trigger change event on individual checkbox

The change event is only triggered automatically when the user changes the element, not when it's changed from code. You need to trigger the event explicitly.

$("#selectAll").on( "click", function(e) {
    $(':checkbox.all_serp_results_selector').prop('checked', this.checked).change();
});

Change checkbox state from change event

This is being caused by two different canSupportAccess properties that live in different scopes, a really common problem in AngularJS. Try making your property at least one layer separated from $scope and not directly attached (e.g. $scope.access = { canSupport: false }). Following the "controller as" syntax best practice reliably avoids this issue, and for an example of this convention in action where you can play with it, see StackBlitz's AngularJS demo templates.

See this popular SO answer on the topic of prototypal inheritance in AngularJS for a deep dive: https://stackoverflow.com/a/14049482/4028303

jquery simple hide show based on checkbox checked

The reason your code not working, you only check the condition checkbox check or not you have to call the checkbox change event also every time when the checkbox gets clicked.
here is a working demo hope it will help you to understand how jquery works.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('#options').hide();
    $('#address').change(function () {
        if ($('#address').prop('checked')) {
            $('#options').show()
        } else {
            $('#options').hide()
        }
    });
});
</script>
</head>
<body>
<div id="options">
//div
</div>
<input type="checkbox" id="address">Mark it
</body>
</html>

---

Related Topics