How to call a javascript function when a checkbox is checked unchecked

by

In this JavaScript tutorial, we will discuss how to call a javascript function when a checkbox is checked unchecked. We will show or hide a textbox control on checked/unchecked of a checkbox in our SharePoint Online form which we have created using HTML, CSS, and put the code inside a script editor web part.

You come across many circumstances where after checking a checkbox, you want to display values from a textbox or an alert.

Call a javascript function when a checkbox is checked unchecked

Below we will discuss how to create an HTML page with a checkbox and trigger event using the onclick function.

Here we are taking a small example to create an HTML page with two checkboxes to display address when checkboxes are checked it would display the textbox with address, and when unchecked it would disappear. For this example, we have created separate files for HTML and JavaScript files.

Create HTML Form

You can create an HTML file using the below code. Here you have two checkboxes as Present Address and Permanent Address with text boxes to display the address when clicked.

Onclick function is used to call a JavaScript function to display the Address text when checked. With text box style as style=”display:none” display visibility property as hidden.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript” src=”https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/bibhus devlopment/developmentjava.js”></script>
</head>
<body id=”body”>
<table>
<tr>
<th> Address </th>
<td colspan=”4″> <input type=”checkbox” name=”Present Address” id=”chkpresent” onclick=”myFunction()”> Present </td>
<td colspan=”4″> <input type=”checkbox” name=”Permanent Address” id=”chkpermanent” onclick=”myFunction1()”> Permanent </td>
</tr>
<tr>
<td colspan=”1″></td>
<td colspan=”4″><input type =”text” id=”txtpresent” style=”display:none”></td>
<td colspan=”4″><input type =”text” id=”txtpermanent” style=”display:none”></td>
</tr>
</table>
</body>
</html>

And the HTML form looks like below:

call javascript function when checkbox is checked

JavaScript Function

Here we have created two functions and we will bind these functions to textboxes where if we click the text box would appear.

Function myFunction() and function myFunction1() are the two functions and we are checking with the checkbox id which is “chkpresent “ with this example of the checkbox using document.getElementById(“chkpresent”); method.

If it is true, a text box is displayed using textbox id as “text present”  and use style. display = ” to display values if checked on else it is none. The same logic is used in the second function to display the text.

function myFunction()
{
var checkBox = document.getElementById(“chkpresent”);
if (checkBox.checked == true){
document.getElementById(“txtpresent”).style.display = ”;
}
else {
document.getElementById(“txtpresent”).style.display = ‘none’;
}
}
function myFunction1()
{
var checkBox = document.getElementById(“chkpermanent”);
if (checkBox.checked == true){
document.getElementById(“txtpermanent”).style.display = ”;
}
else {
document.getElementById(“txtpermanent”).style.display = ‘none’;
}
}

Either you can put the above HTML and JS code inside a content editor web part or you can also use inside a script editor web part in SharePoint 2013/2016/Online.

This is how the output will appear.

You can see text box is not visible as we have used style=”display:none”  on HTML file.

checkbox unchecked event javascript
checkbox unchecked event javascript

As you can see after JavaScript we can see these changes.

checkbox unchecked event using javascript
checkbox unchecked event using javascript

You may like the following JavaScript tutorials below:

Hope this article will be helpful to learn how to call a javascript function when a checkbox is checked unchecked.

    • >