Error in Javascript for Chekar Asp:Checkbox

Asked

Viewed 151 times

1

Good morning. I have the following code:

HTML:

<asp:CheckBox ID="ckPergunta" runat="server" onchange='SelectChoices(this);' />

Javascript:

<script type="text/javascript">
    SelectChoices();
    function SelectChoices() {
        var opc = document.getElementById('<%=ckPergunta.ClientID%>').checked;
        if (opc == false) {
            document.getElementById('<%=dlTipoResposta.ClientID %>').style.display = "none";
            document.getElementById('<%=txtRes.ClientID %>').style.display = "none";
        }
        else {
            document.getElementById('<%=dlTipoResposta.ClientID %>').style.display = "block";
            document.getElementById('<%=txtRes.ClientID %>').style.display = "block";
        }
    }
</script>

It happens that when I check, in the checkbox the Javascript code does not run. In other words, nothing happens. But if I put an onChange on an Asp:Textbox the Javascrip code works right. What’s wrong?

javascript html asp.net checkbox onclick
  • 1

    You in your onchange of checkbox you are sending (trying) the element to the function when it has no input parameter. Even if you want to send the element, in your case the checkbox, you have to use $(this), and not just this. Now you need to see what you really want so we can help you... if you erase the this of your onchange already works

1 answer

0


you are trying to call a function before it is instantiated, with this the Script triggers an exception and the Function is never created, so the following change should already solve:

function SelectChoices() {
    var opc = document.getElementById('<%=ckPergunta.ClientID%>').checked;
    if (opc == false) {
        document.getElementById('<%=dlTipoResposta.ClientID %>').style.display = "none";
        document.getElementById('<%=txtRes.ClientID %>').style.display = "none";
    }
    else {
        document.getElementById('<%=dlTipoResposta.ClientID %>').style.display = "block";
        document.getElementById('<%=txtRes.ClientID %>').style.display = "block";
    }
}
SelectChoices();

In any case, I advise you to make some changes to the code (just to improve a little the performance and to help in the organization of it), first remove which declaration of scripts inline in HTML, and then avoid queries to the DOM Elements, Finally try not to use inline Tyles, use classes for this.

Javascript

var ckPergunta = document.getElementById('<%= ckPergunta.ClientID%>');
var dlTipoResposta = document.getElementById('<%= dlTipoResposta.ClientID%>');
var txtRes = document.getElementById('<%= txtRes.ClientID%>');

var SelectChoices = function (event) {
  if (ckPergunta.checked) {
    dlTipoResposta.classList.add("invisivel");
    txtRes.classList.add("invisivel");
  } else {
    dlTipoResposta.classList.remove("invisivel");
    txtRes.classList.remove("invisivel");
  }
}

ckPergunta.addEventListener("change", SelectChoices );

CSS

.invisivel {
  display: none
}

Browser other questions tagged javascript html asp.net checkbox onclick

You are not signed in. Login or sign up in order to post.