The ':radio Selector' is used to select all the input elements with type="radio".
Say, for example, if you want something to be entered by the user.
And HTML uses the <input> element to achieve the above.
Let us learn more with the below example.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<span> Select any one value :: </span>
<input type = "radio" name = "anyName"> YES
<input type = "radio" name = "anyName"> NO
<br/><br/>
<button> Click me </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$(':radio').hide();
});
</script>
</body>
</html>
So, if you see the above code. We can see that there are three input elements. The first two,
<input type = "radio" name = "anyName"> <input type = "radio" name = "anyName">
Has the <input> tag.
While the third one is a button.
<button> Click me </button>
Yes! A <button> is also an input element.
And we want to hide those input elements that has 'type = "radio"'(Using 'hide()' function provided by JQuery).
And we can see that there are two <input> element that has 'type = "radio"'.
Thus the radio buttons,
<input type = "radio" name = "anyName"> <input type = "radio" name = "anyName">
Gets hidden.
And this happened with the ':radio' element selector.
$('button').click( function() {
$(':radio').hide();
});The moment the button is clicked, JQuery statement gets triggered.
$(':radio').hide();And the JQuery code locates the input element of type radio and hides them.