jquery select radio button by value – How to Set Radio Button Checked Based on Value?

Rate this post

jquery select radio button by value : Use the jQuery :checked selector – One of the best possible ways to preselect a radio button is to refer to it by its ID.

Free Live Chat for Any Issue

jquery select radio button by value

To process the elements using javascript/jQuery, first you need to select the elements. we’ll tell you “How to set Radio Button Checked based on Value using jQuery”.

$('.action').click(function(){

    var value = 1;

    $("input[name=type][value=" + value + "]").prop('checked', true);

});

$('.action2').click(function(){

    var value = 2;

    $("input[name=type][value=" + value + "]").prop('checked', true);

});

Solution

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jquery set radio button checked based on value - www.pakainfo.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  
<h2>jquery set radio button checked based on value - www.pakainfo.com</h2>
  
<label>
    <input type="radio" name="type" value="1"> User
</label>
<label>
    <input type="radio" name="type" value="2"> Admin
</label>
  
<button class="action">Select User</button>
<button class="action2">Select Admin</button>
  
<script>
    $(document).ready(function(){
  
        $('.action1').click(function(){
            var value = 1;
            $("input[name=type][value=" + value + "]").prop('checked', true);
        });
  
        $('.action2').click(function(){
            var value = 2;
            $("input[name=type][value=" + value + "]").prop('checked', true);
        });
  
    });
</script>
  
</body>
</html>

Don’t Miss : Jquery Radio Button Selected Event

Read Also:  Angularjs Login And Registration Modal Template

How to get the value of selected radio button in a group using jQuery?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Radio Button Value - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
    });
</script>
</head> 
<body>
    <h4>Please select your gender.</h4>
    <p> 
        <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label>
    </p>
    <p><input type="button" value="Get Value"></p>
</body>
</html>

Download

I hope you get an idea about jquery select radio button by value.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.