Skip to content

Get the value of a radio input button using jQuery

I’m trying to get the value of the radio button that has been clicked, and I’m using the code below. But I’m getting the following error:

jquery-3.5.1.min.js:2 Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined

The code that I have used:

$(()=> {
  $("input:radio").click(()=>{
    alert($(this).val())
  })
})

Answer

The issue is that you are using an arrow function, so this refers to whatever it refered to outside of that function (it won’t refer to the clicked element).

$(()=> {
  $("input:radio").click(function(){
    alert($(this).val());
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="demo">
    <input type="radio" name="demo" value="a"/> A
</label>
<label for="demo">
    <input type="radio" name="demo" value="b"/> B
</label>
<label for="demo">
    <input type="radio" name="demo" value="c"/> C
</label>
<label for="demo">
    <input type="radio" name="demo" value="d"/> D
</label>