Get All Checked Checkboxes jQuery Datatables
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of get all checked checkboxes jQuery datatables, given a list of checkboxes. Using JQuery, you must retrieve the values of each checked box that is selected in the array.
Several methods are discussed further below
Method jQuery on() :-
The selected elements' and their child elements' event handlers are added using this method.
$(selector).on is the syntax (event,childSeldata, fun,map)
Parameters :-
event: This setting is required. It designates one or more events or namespaces to be added to the chosen elements.
Space should be used to divide any multiple event values. The event must be valid.
childSel: This parameter is not required. Only defined child elements are allowed to receive an event handler, according to the specification.
This parameter is not required. It specifies additional information to be passed to the function.
This parameter is required. The steps that must be taken when the event occurs are described.
It provides an example of an event map including one or even more events to add to the selected elements and functions to run when the events take place (event:func(), event:func(), etc.).
Step By Step Guide On Get All Checked Checkboxes Jquery Datatables :-
<!DOCTYPE html>
<html>
<head>
<title>
JQuery
</title>
<style>
#TC_UP {
font-size: 17px;
font-weight: bold;
}
#TC_DOWN {
color: green;
font-size: 24px;
font-weight: bold;
}
button {
margin-top: 20px;
}
</style>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
TalkersCode
</h1>
<p id="TC_UP">
</p>
<input type="checkbox" name="type" value="TC" /> TC:
<input type="checkbox" name="type" value="TC" /> TC:
<input type="checkbox" name="type" value="TC" /> TC:
<input type="checkbox" name="type" value="portal" /> portal:
<br>
<button>
click here
</button>
<p id="TC_DOWN">
</p>
<script>
$('#TC_UP')
.text('First check few elements then click on the button.');
$('button').on('click', function() {
var array = [];
$("input:checkbox[name=type]:checked").each(function() {
array.push($(this).val());
});
$('#TC_DOWN').text(array);
});
</script>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- A message will appear if the Yes checkbox is selected, and you then click the Submit button.
- Clicking the Submit button on a form with unchecked checkboxes will bring up an error message.
Conclusion :-
I hope this article on get all checked checkboxes jQuery datatables helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
