"get radio val() and pass on data value attr() using jQuery"
Bootstrap 4.1.1 Snippet by iammohitverma

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Radio Button Value</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> h4{ position: relative; } h4::before { background-color: red; content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; } p.dv[data-value="female"] > label[id="female"] { color: red; } p.dv[data-value="male"] > label[id="male"] { color: blue; } </style> <script> $(document).ready(function(){ $("input[type='radio']").click(function(){ var radioValue = $("input[name='gender']:checked").val(); if(radioValue){ alert("Your are a - " + radioValue); $("p.dv").attr("data-value", radioValue); } }); }); </script> </head> <body> <h4>Please select your gender.</h4> <p class="dv"> <label id="male"><input type="radio" name="gender" value="male">Male</label> <label id="female"><input type="radio" name="gender" value="female">Female</label> </p> <p><input type="button" value="Get Value"></p> <div class="module"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum <span>Test</span></p> </div> </body> </html>

Related: See More

BLK• Design System
Responsive Data Cards (Bootstrap 4)
Animated Radio tab
Funky Radio/Checkbox Buttons V2.0

Questions / Comments: