Get Checked Radio Button Value in Vue JS

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hi Developer,
Hope all are okay. Now today i will show you how to get selected radio button value by using onchange event in vue js app. So i will give you a very small and simple example for get checked radio button value vue js app.

We can easily get a selected text value of radio buttons in vue js. So i will give you a bellow full example of getting selected radio buttons text and value in vuejs. So now I will show you how to Vue JS Get Checked Radio Button Value.

In this example, i will give you a very short and simple radio buttons with some options like laravel, php, codeigniter, etc. When you select it. So we will get selected radio button text and value by using on change event value vue js.

Read Also : How to get current date time in vue js?

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Checked Radio Button Value on Onchange Event - Codingspoint.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
<div id="app">
  
  <label><input type="radio" name="category_id" @change="onChange($event)" class="form-control" value="1"> Laravel</label>
  <label><input type="radio" name="category_id" @change="onChange($event)" class="form-control" value="2"> Codeigniter</label>
  <label><input type="radio" name="category_id" @change="onChange($event)" class="form-control" value="3"> Vue JS</label>
    
</div>
    
<script type="text/javascript">
    
    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              var optionText = event.target.value;
              console.log(optionText);
          }
      }
    })
    
</script>
     
</body>
</html>

Hope it will help you… Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →