How to check radio button in jQuery by name

How to check radio button in jQuery by name, learn how you can check wheater someone clicked on the radio button with its value.

Sometimes you have to ask for some input from your website user, for that purpose you want to create a form. in this article, I will show you how you can collect the selected value of your user and show it in an alert box. I will use the Jquery library to perform this action. In the first section, I will show how you can call the JQuery library in your HTML page and how you can write functionality to collect selected value and show it in an alert box.

1: How to check radio button in jquery by name.

How to check radio button in jquery by name
How to check radio button in jquery by name
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>Check radio button clicked by name.</h1>
<h2>Alert message will be displayed when <br/> someone clicks on radio button</h2>


<label>
  <input type="radio" id="id_gray" name="color_radio" value="grey" />Grey</label>
<label >
  <input type="radio" id="id_pink" name="color_radio" value="pink" />Pink</label>
<label >
  <input type="radio" id="id_green" name="color_radio" value="green" />Green</label>

<script>


$("[name='color_radio']").click(function (){

  	alert($(this).val() + ' radio button clicked');
  });


</script>

</body>
</html>

In the above example I have shown you how you can trigger your code when the user clicks on the radio button by its name, for that I have written code for three radio buttons Grey, pink, and green. When a user clicks on the pink color then an alert box will be shown to him or else the user clicks on another radio button then that name will be shown to the user like the above-mentioned image. you can modify this code as per your requirement.

For mentioned functionality, I have used the jQuery library because the code which I used to check radio button is checked or not is in jQuery format.

after checking alert message will be displayed to the user with the color name. by using above method you will be able to check the radio button in jquery by name.

In the head section, I have called the jQuery library, after that our jQuery code can run, without this library you will get the error to execute the code.

alert($(this).val() + ‘ radio button clicked’); code will display an alert message when someone clicks on the radio button.

2: How to check radio button in jquery by name after clicking on the button.

How to check radio button in jquery by name after clicking on the button
How to check radio button in jquery by name after clicking on the button
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>Check radio button clicked by name.</h1>
<h2>Alert message will be displayed when <br/> someone clicks on Check button</h2>


<label>
  <input type="radio" id="id_gray" name="color_radio" value="grey" />Grey</label>
<label >
  <input type="radio" id="id_pink" name="color_radio" value="pink" />Pink</label>
<label >
  <input type="radio" id="id_green" name="color_radio" value="green" />Green</label>

<input type="button" name="" onclick="CheckRadioButton()" value="Check">
<script>

	
	function CheckRadioButton()
	{
	alert($("[name='color_radio']:checked").val() + ' radio button is selected');
	}
	
</script>

</body>
</html>

The above code will display an alert message when the user selects a value from the radio button and then presses the check button, then the user will get a message in the alert box with the selected value and some message. This code will help you when you want to perform radio button checking on a button click by its name. you can also use the same functionality for dropdown changes. In this case, you will just replace the placement of the function CheckRadioButton().

<h1>, <h2> tags are used here to display the heading of the page.

Do you like the article? if yes then write a comment it will motivate me to write more content for you.

Share this article with your friends to help them, they will like it.

### How to add and remove class in JavaScript on click

### Settimeout JavaScript | Best 9 Settimeout JavaScript Examples

### How to redirect the user from one page to another

### Hosted Libraries By google

Leave a Comment

Your email address will not be published. Required fields are marked *