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 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:
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.
As you can see after JavaScript we can see these changes.
You may like following JavaScript tutorials below:
- How to handle radio button checked and unchecked events using JavaScript and jQuery
- Dropdown selected change event in jQuery Example
- Run JavaScript after page loaded completely using jQuery
- Simple HTML form design examples with code (CSS and JavaScript)
- JavaScript – Difference between Var, Let, and Const Keyword
- Display SharePoint list data in HTML table using JavaScript
- How to create a SharePoint Online Chatbot using JavaScript
- QR CODE Generator in SharePoint using JavaScript
Hope this article will be helpful to learn how to call a javascript function when a checkbox is checked unchecked.
Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com
How can I get a particular value of a checked checkbox out of many checkbox using JavaScript.