radio button with icon

radio button with icon

by sunil puvvada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
</form>

CSS

.button input[type="radio"] {
    display: none;
}

input[type="radio"]:checked + label {
    border: 1px solid red;
}

JavaScript

$('#myForm input').on('change', function() {
                alert($('input[name=a]:checked', '#myForm').val()); 
            });