HTML Checkbox Group Single Selection
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of HTML checkbox group single selection, in HTML there are many ways with the help of which you are able to check that the only one checkbox is selected or not.
This can be done with the help of JavaScript and jQuery also.
And the methods of codes to be write in these languages may be different also.
As a result, our today’s topic is to make a single selection in checkbox group in html.
Our topic can be done with the help of jQuery and in next session we will show you how this same can be done with the help of JavaScript.
Step By Step Guide On HTML Checkbox Group Single Selection :-
Now, today we will show you how you are able to apply a validation on checkbox. The meaning of our topic is that as there may be many checkbox present on webpage screen.
But the user must have to click only one means that only one is acceptable. Hence, we complete this topic with the help of jQuery.
So, you must include jQuery file in your head tag. After this the code for this is showed as:
<!DOCTYPE html>
<html>
<head>
<title>checkbox and radios</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$('.button').click(function(){
if ($('input[type=checkbox]:checked').length==1) {
alert("done");
}
else {
alert("Please check atleast one checkbox");
}
})
})
</script>
</head>
<body style="text-align: center; margin-top: 100px;">
<label for="">
Please select any one::
</label>
<input type="checkbox" name="bse" id="" class="male">BSE
<input type="checkbox" name="nse" id="" class="female">NSE
<br><br>
<label for="">
Please submit your data::
</label>
<input type="button" value="Click me to submit" class="button">
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, the content to be showed on browser’s display is written here. Here, first we link jQuery file in head tag. And after this in body we use a label tag to show title with two checkboxes and then a submit button to finish this page.
- Whereas in jQuery code, we apply a function on button that when button gets clicked then there is at least one checkbox must be clicked and the code is as: if ($('input[type=checkbox]:checked').length==1)
- Other side if no one is checked or both are checked then the if become false and page gets not submitted.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we show you that how you are able to check only single selection of html checkbox group.
This topic is done with the help of jQuery whereas in next topic we done this again with the help of JavaScript.
I hope this tutorial on HTML checkbox group single selection helps you.
About Dikshita
