Changing checkbox state using jQuery

Question

I have an jQuery dialog box, containing table with multiple checkboxes.

$("#custom-modal").dialog({
            height: 200,
            modal: true,
            buttons: { "OK": function () {
                var table1 = $("#MainContent_rtc1_customTable").html();
                alert(table1);
                //$.session('mytbl', $("#customTable").val());
                $.ajax({
                    type: "POST",
                    url: "MyPage.aspx/BindCustom",
                    data: ({ param1: table1 }),
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    },
                    success: function (result) {
                        alert("success");
                    }
                });

                $(this).dialog("close");
                return true;
            }, "Cancel": function () {
                $(this).dialog("close");
                return false;
            }
            }

        });
    });

    $(':checkbox').click(function () {
        var $this = $(this);
        if ($this.is(':checked')) {
            //alert(event.target.id);
            $this.attr('checked', false);
        } else {
            //alert(event.target.id);
            $this.attr('checked', true);
        }
    });

After changing states of checkboxes, When I see html code of the table with alert(table1); (after pressing OK button); I see states of all the checkboxes as checked. So they don't gets changed.?

"~" is an ASP .Net convention and doesn't work outside of the server-side environment. — Steven Hunt
– Steven Hunt, Commented Oct 4, 2012 at 13:27
I'm confused to what you want exactly.. doesn't a checkbox automatically check/uncheck it self on click? — wirey00
– wirey00, Commented Oct 4, 2012 at 13:44
@wirey, didn't knew that. New to jQuery.But before adding extra code for xcheckboxes, alert(table1); was still showing that states of checkboxes are not changed at all. — benjamin54
– benjamin54, Commented Oct 4, 2012 at 13:48
Can you create a jsfiddle.net? and replicate your issue? It would make it a lot easier to troubleshoot what the problem is. Also what is the exact code you are writing to alert? — wirey00
– wirey00, Commented Oct 4, 2012 at 13:50

Community · Accepted Answer · 2017-05-23 12:04:40Z

If they are ASP check boxes then the actual check box input is not the control. besides that it would appear you are not properly binding the event, which as mentioned by wirey, is not needed if you are just trying to change the checked property.

Refer to this post if you still need to add an event handler to the check boxes:

Need to select all checkboxes and dynamically add specific event handler to each

The issue is was reported as a bug but then decalred not valid and not fixed (http://bugs.jquery.com/ticket/7594).

One thing that you could do is to handle the click event correctly and then set a custom variable that could be checked. In asp this would be difficult to check because the check boxes are not just inputs, they come packaged with a span and all classes and attributes are usually added to the span, not the box.

So depending on your needs you could do the following:

var table1;

$('.isCheckBox').each(function(){
    //default value set here
    $(this).attr('isChecked','false');
});

$('input:checkbox').click(function (event) {
    if($(this).prop('checked') == true)
    {
       $(this).attr('data-isChecked','true'); 
    }
    else
    {
        $(this).attr('data-isChecked','false'); 
    }

    table1 = $('#thetable').html();
    alert(table1);
});

with HTML of:

<table id="thetable">
<tr>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
</tr>

Fiddle: http://jsfiddle.net/DwerK/9/

And then check for the attribute 'data-isChecked'. You need to add the data prefix so that HTML will validate.

Now I speculate that you could add the attribute to the parent element and then check it in code behind, not sure how exactly that would work and have not had an instance to check it.

I hope that helps.

EDIT: Wirey asked to see the issue, as I understand it this illustrates the issue: http://jsfiddle.net/w22Q4/2/

Ram · Accepted Answer · 2012-10-04 13:37:49Z

0

$('input[type=checkbox]').click(function () {
        var $this = $(this);
        if (this.checked) {
            //alert(event.target.id);
            $this.prop('checked', false);
        } else {
            //alert(event.target.id);
            $this.prop('checked', true);
        }
});

edited Oct 4, 2012 at 13:37

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Oct 4, 2012 at 13:35

Руслан Раянов

1

1 Comment

wirey00 Over a year ago

You can do without the if/else by adding the condition inside like $this.prop('checked', !this.checked);

Alexey Bychkov · Accepted Answer · 2012-10-04 14:10:24Z

0

Try to use $(this).removeAttr('checked'); instead of $this.attr('checked', false);

edited Oct 4, 2012 at 14:10

answered Oct 4, 2012 at 14:03

Alexey Bychkov

5815 silver badges9 bronze badges

Collectives™ on Stack Overflow

Changing checkbox state using jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related