accessing checkbox using javascript

In the following example, we hide/unhide the table using checkbox. We access the checkbox using javascript. Also the code changes the textbox ‘txtname’ to readonly

<!DOCTYPE html>
<html>
<head>
    <title>Untitled document</title>
  <meta charset="utf-8" />

    <script language="javascript" type="text/javascript">

        function myfunction()
        {
            var chk = document.getElementById("chkchoice1");
            var tbl = document.getElementById("tbl1");

            if(chk.checked == true)
            {
                //   document.writeln("It is checked");
                tbl.style.visibility = "visible";
                //document.getElementById("txtname").disabled="disabled";
                document.getElementById("txtname").readOnly = true;
            }
            else
            {
                //document.writeln("it is not checked");
                tbl.style.visibility = "hidden";
                //document.getElementById("txtname").disabled = "";
                document.getElementById("txtname").readOnly = false;
            }
        }
    </script>
</head>
<body>

<form id="frm" name="frm" method="post" action="about.html">
    
    <input id="chkchoice1" name="chkchoice1" type="checkbox"
           value="chkchoice1val" onclick="myfunction();" />    
    <br /><br />
    <input id="txtname" name="txtname" type="text" value="pak" />
    <br /><br />


    <table id="tbl1" border="1" style="visibility:hidden">
        <tr><td>1</td><td>karachi</td></tr>
        <tr><td>2</td><td>peshawar</td></tr>
        <tr><td>3</td><td>lahore</td></tr>
    </table>

    <input id="btn" name="btn" type="button" value="click" 
           onclick="myfunction();" />

    <input id="btn1" name="btn1" type="button" value="click"
           onclick="window.location.href = 'form1data.html';" />

</form>

</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *