How to get the value of selected radio button using jQuery

by Basant | Sep 20, 2024 | Design, PHP, WORDPRESS, Wordpress Design

Just use below code and modified according to your need.

Note: this is very useful for COD and Prepaid charge addition using javascript, jquery, PHP

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<br><br><br>
<script>
    $(document).ready(function(){
        $("input[type='radio']").change(function(){
        	var radioValue = $("input[name='payment_method']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);


                	var totl     = parseInt($("#total_amount").val());

		       	var shipping_value = totl ;
		          
		          // alert(pay_method);
		          // console.log(pay_method);

		          if(radioValue !=0)
		               {
		                    $("#pay").hide();

		               		let cod_charge = 50;

		               		var totl = totl + cod_charge;


		                   $("#gttotal").html("<label>Total Amount</label> <input type='text' name='total_amount' value='"+totl+"' readonly>");
		               }

		               

		               else
		               {
		               		$("#gttotal").html("<label>Total Amount</label> <input type='text' name='total_amount' value='"+totl+"' readonly>");
		               }




            }
        });
    });
</script>

<form action="forms.php">
    <h4>Please select your Payment Method.</h4>
    <p> 
        <label><input type="radio" name="payment_method" value="0" checked>Prepaid</label>
        <label><input type="radio" name="payment_method" value="1">COD</label> 
    </p>
   
    <div id="pay">
				<label>Total Amount</label>
				<input type="text" id="total_amount"  name='total_amount'  value="100" readonly>

		</div>

		<div id="gttotal"></div>

	<input type="submit" name="">


</form>