Check a Checkbox using Javascript Function

Question

how to make a checkbox checked/unchecked based on the value sent to the Javascript function? Pls check this how to call the showModalPopup function.

I have a gridview:

<asp:GridView ID="GV1" runat="server" DataSourceID="DS1" >
  <Columns>

    <asp:BoundField HeaderText="ID" DataField="ID"/>

    <asp:TemplateField ShowHeader="False">
      <ItemTemplate>
        <asp:LinkButton ID="Edit_LinkButton" runat="server" CausesValidation="False" >
          <asp:Image ID="Edit_Linkbutton_Image" runat="server" ImageUrl="~/edit.png"></asp:Image>
        </asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Status" Visible="False">
      <ItemTemplate>
        <asp:Label ID="Status" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

  </Columns>
</asp:GridView>

And then I attach a Javascript function to the LinkButton through code-behind:

Dim myLinkButton As LinkButton

For i As Integer = 0 To GV1.Rows.Count - 1
  Dim CheckBox1 As String = TryCast(GV1.Rows(i).FindControl("Status"), Label).Text

  myLinkButton = DirectCast(GV1.Rows(i).Cells(1).FindControl("Edit_LinkButton"), LinkButton)
  myLinkButton.Attributes.Add("onclick", "shopModalPopup('" & .Rows(i).Cells(0).Text & "', '" & CheckBox1 & "'); return false;")
Next

Rows(i).Cells(0) is the first column on the Gridview, it is "ID".

Then, the Javascript function to call the modal-box is:

<script>
                var grid_modal_options = {
                    height: 450,
                    width: 550,
                    modal: true
                };

                function shopModalPopup(Field1, Check1) {
                    var DataField1 = Field1; //--> ID
                    var CheckField1 = Check1; //--> Status

                    grid_modal_options.open = function () {
                        $('#dialog-form #Textbox1').val(DataField1);
                        $('#dialog-form #Checkbox1').checked = CheckField1;
                    };

                    $("#dialog-form").dialog(grid_modal_options);
                    $("#dialog-form").parent().appendTo('form:first');
                }
</script>

And the code for display the modal-box:

<div id="dialog-form" title="Modal-box" style="display: none;">
    <asp:TextBox ID="Textbox1" runat="server" Text="" Enabled="false">
    <asp:CheckBox ID="Checkbox1" runat="server"/>
</div>

The code above doesn't check the checkbox but for the textbox value assigned succesfully. I need the checkbox one is also assigned by the javascript. How can I do that? Thank you very much.

You should read the API docs. Once your code is working correctly, toss it over to http://codereview.stackexchange.com since it could use quite a few stylistic improvements. — Matt Ball, Apr 24 '12 at 13:35
And if you're using unique ids to reference your DOM elements, you don't need to make them any more specific than just the ID — Marc, Apr 24 '12 at 13:37
Pls have a check on http://stackoverflow.com/questions/10291047/assign-a-textbox-value-to-the-modal-box-on-the-same-page/ . I just don't want to make it redundant to rewrite the same code here. Sorry for missing to enclose the link.. — mrjimoy_05, Apr 24 '12 at 13:57

score 0 · Answer 1 · answered Apr 24 '12 at 13:34

0

Pretty sure it should be like this:

$('#dialog-form #Checkbox1').attr('checked', true);

answered Apr 24 '12 at 13:34

Matthew Riches

2,298
18
26

Thanks, but it doesn't work. Pls see the link provided above to make clear how to call the function on the Javascript. :) – mrjimoy_05 Apr 24 '12 at 13:59

Darren · Accepted Answer · 2012-04-24T15:19:28.853

0

Use the .prop() command:

$("#dialog-form #Checkbox1").prop("checked", CheckField1);

http://api.jquery.com/prop/

edited Apr 24 '12 at 15:19

answered Apr 24 '12 at 13:34

Darren

68,902
24
138
144

I think it should be right but it doesn't work. Am I missing something? Pls see the link provided above to know how to call the function on the Javascript. Thanks :) – mrjimoy_05 Apr 24 '12 at 13:59
@mrjimoy_05 - what does CheckField1 return? alert(CheckField1), this should return true in order to set the checkbox value property. – Darren Apr 24 '12 at 14:10
The CheckField1 return the true/false value. I checked it and return the right value, but still can't check/uncheck the checkbox. – mrjimoy_05 Apr 24 '12 at 14:24
@mrjimoy_05 try: $("#Checkbox1").prop("checked", CheckField1); If that doesn't work try: alert($("#dialog-form #Checkbox1")); and see if that returns the object. – Darren Apr 24 '12 at 14:30
I tried and it returns the object. But still can't set the check/uncheck on the checkbox... – mrjimoy_05 Apr 24 '12 at 14:37
I've tried using `$("#Checkbox1").prop({checked: true});` but caused every time I am opening the modal-box, it always refresh the page.. – mrjimoy_05 Apr 24 '12 at 15:29

score 0 · Answer 3 · answered Apr 24 '12 at 13:38

0

You can use .val(), with the value of the checkbox as a single-item array to check a checkbox:

$('#dialog-form #Checkbox1').val([ "Checkbox1" ]);

Make sure the checkbox specifices "Checkbox1" as its value.

answered Apr 24 '12 at 13:38

Ates Goral

137,716
26
137
190

Thanks for the code, but it doesn't work. Pls see the link provided above to make clear how to call the function on the Javascript. :) – mrjimoy_05 Apr 24 '12 at 13:58
@Does you checkbox have a `value` attribute? – Ates Goral Apr 24 '12 at 14:04
No, it doesn't... Or I misunderstood what you mean? – mrjimoy_05 Apr 24 '12 at 14:23
Sorry for being too terse. What I meant was, you need to add a `value` attribute to your checkbox for `val` to work. This is not the most concise way to check a checkbox, but I like it because it uses `val`, similar to other field types. – Ates Goral Apr 24 '12 at 14:38
You means: `` ? – mrjimoy_05 Apr 24 '12 at 14:56
I don't know about ASP markup, but probably something like: ` – Ates Goral Apr 24 '12 at 15:46
Yes, so it should be `text` attribute. I tried it but resulting the same thing.. > – mrjimoy_05 Apr 24 '12 at 15:57
Doesn't `text` set the label? – Ates Goral Apr 24 '12 at 15:59

Check a Checkbox using Javascript Function

3 Answers3