jQuery :radio Selector Last Updated : 10 Jul, 2023 Comments Improve Suggest changes Like Article Like Report The jQuery :radio Selector is used to select all elements of type radio. The working of $( “:radio” ) and $( “[type=radio]” ) is same. To select a group of radio buttons that are used in the form, we use $( "input[name=name_of_group]:radio" ). It returns an array of input elements of type radio. Syntax: Default Syntax: $( "input[name=group_name]:radio" ) Syntax used to take advantages: Above syntax cannot take advantage of the performance optimization of native DOM so use the below syntax instead. $("input[type=radio][name=group-1]") Method-1: $("input[type=radio]") This method of selection selects all input elements of type radio ie. every radio element of the page. Example 1: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action=""> <input type="text" name="name" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-2" /> <input type="radio" name="group-2" /> </form> </body> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { let input = $("input[type=radio]").wrap( "<div></div>").parent().css({ background: "green", display: "inline" }) console.log(input) }); </script> </html> Console: Output: Method 2- $("input:radio") This produces the same result as the previous one. Example 2: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action=""> <input type="text" name="name" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-2" /> <input type="radio" name="group-2" /> </form> </body> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { let input = $("input:radio").wrap( "<div></div>").parent().css({ background: "green", display: "inline" }) console.log(input) }); </script> </html> Output: Method-3: $("input[type=radio][name=group-1]") This will select specified group of radio inputs from the form. Example 3: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action=""> <input type="text" name="name" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-1" /> <input type="radio" name="group-2" /> <input type="radio" name="group-2" /> </form> </body> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { let input = $("input[type=radio][name=group-1]").wrap( "<div></div>").parent().css({ background: "yellow", display: "inline" }) console.log(input) }); </script> </html> Console: Output: Comment More infoAdvertise with us Next Article jQuery :radio Selector P Pankaj_Singh Follow Improve Article Tags : Web Technologies JQuery jQuery-Selectors Similar Reads jQuery * Selector The jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se 1 min read jQuery #id Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja 1 min read jQuery .class Selector The jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, 1 min read jQuery multiple classes Selector The jQuery multiple class selector is used to select multiple classes of an HTML document. Syntax: $(".class1, .class2, .class3, ...")Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, we will select the multiple classes by us 1 min read jQuery element Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i 1 min read jQuery multiple elements Selector The jQuery multiple elements Selector is used to select multiple elements of an HTML document. Syntax: $("element1, element2, element3, ...")Parameter: element: This parameter is required to specify the elements to be selected.Example 1: In this example, we will select the multiple elements by using 1 min read jQuery :first Selector The jQuery :first Selector is used to select the first element of the specified type. Syntax: $(":first")Example 1: In this example, we will select the first <p> element by using jQuery :first Selector. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.goo 1 min read jQuery :last Selector The jQuery :last Selector is used to select the last element of the specified type. Syntax: $(":last")Example 1: In this example, we will select the last <p> element by using jQuery :last Selector. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleap 1 min read jQuery :even Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja 2 min read jQuery :odd Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i 2 min read Like