ASP.Net Custom Checkbox property checked

Question

so recently I started a C# Asp.Net quiz for one of my school projects, but I ran into the following problem:

My index.aspx site:

   <form runat="server" class="ac-custom ac-checkbox ac-boxfill" autocomplete="off" onload="Page_Load">

      <asp:CheckBox ID="q1a1" runat="server" Text="example answer" onclick="changeState(this);" />

   </form>

I applied to the checkbox the onClick event which fires (I tested it out) the

changeState()

event. But so far, nothing is happening to one of the properties when I try to change it.

So, for the custom checkbox I use this: (I hope it is okay, that I post a link reference to it. Either way, I'll do it.

Reference for the custom animated Checkboxes

So, when I click the checkbox, the custom style applies to it, but the checked property doesn't change at all. So I started experiment a bit around with Javascript, but came to no solution.

The javascript I use:

<script type="text/javascript">
    function changeState(caller) {
        if (document.getElementById(caller.id).checked)
        {
            document.getElementById(caller.id).checked = false;
        }
        else
        {
            document.getElementById(caller.id).checked = true;
        }
    }
</script>

Also I read somewhere, that you can use a thing like:

document.getElementById(caller.id).click();

to change the checkstate. But both of these things doesn't helped me. Maybe you guys can give me some hope, pretty sure it can be a simple solution. But I'n open for all tips or changes.

Answer 1

This javascript is the issue, you are checking if it's checked and then setting it to false so it's unchecking it.

<script type="text/javascript">
    function changeState(caller) {
        if (document.getElementById(caller.id).checked)
        {
            document.getElementById(caller.id).checked = false;
        }
        else
        {
            document.getElementById(caller.id).checked = true;
        }
    }
</script>

I would use a variable like isCheckboxChecked to hold the value of the checkbox checked state.