Skip to content

All topics  /  Vue

How to Get Checked Radio Button Value on Onchange Event in Vue JS ?

Vue ·

Hi Guys,

Today,I will learn you how to get checked radio button value on onchange event in vue js? We will show example of Vue JS Get Checked Radio Button Value on Onchange Event.i will give you simple example of get get checked radio button value vue js.

we can easily get selected text value of radio buttons in vue js. i give you bellow full example of getting selected radio buttons text and value in vuejs.

I will take a simple radio buttons with some options like laravel, php, codeigniter, etc. when you select it. we will get selected radio button text and value using on change event value vue js.

Example


<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Checked Radio Button Value on Onchange Event - nicesnippets.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"> Html</label>
  <label><input type="radio" name="category_id" @change="onChange($event)" class="form-control" value="3"> Vue JS</label>
  <label><input type="radio" name="category_id" @change="onChange($event)" class="form-control" value="4"> PHP</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>

It will help you...

More on this topic