Dropdown with Radio button and jQuery

Question

I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.

The expanded class is used to open/close the dropdown menu.

I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.

 $('.maincar__currency').click(function(e) { e.preventDefault(); e.stopPropagation(); $(this).toggleClass('expanded'); $('#' + $(e.target).attr('for')).prop('checked', true); }); $(document).click(function() { $('.maincar__currency').removeClass('expanded'); });

 .maincar__currency { display: flex; flex-direction: column; min-height: 32px; max-height: 32px; margin-left: auto; margin-bottom: 10px; overflow: hidden; border-radius: 6px; box-sizing: border-box; box-shadow: $shadowBox; font-size: 14px; font-weight: 500; }.maincar__currency label { display: flex; width: 80px; height: 32px; padding-top: 6px; padding-bottom: 6px; padding-left: 8px; margin-right: 0 auto; background-color: #fff; text-align: center; color: $mediumMainGrey; cursor: pointer; //box-sizing: border-box; }.maincar__currency label:hover { background-color: $extraLightGrey; }.currency { display: flex; width: 100%; }.currency input { display: none; }.currency img { //object-fit: contain; height: 20px; width: auto; margin-right: 6px; }.currency span { display: flex; //align-items: center; color: $mediumMainGrey; text-decoration: none; }.expanded { max-height: 128px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="maincar__currency"> <label for="euro-radio-is"> <div class="currency currency__euro"> <img src="/assets/images/icons/euro.png" alt="Euro sign"> <input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true"> <span class="default">EUR</span> </div> </label> <label for="dollar-radio-is"> <div class="currency currency__dollar"> <img src="/assets/images/icons/dollar.png" alt="Dollar sign"> <input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar"> <span>USD</span> </div> </label> <label for="gbp-radio-is"> <div class="currency currency__pound"> <img src="/assets/images/icons/pound-sterling.png" alt="Pound sign"> <input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp"> <span>GBP</span> </div> </label> <label for="chf-radio-is"> <div class="currency currency__chf"> <img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign"> <input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf"> <span>CHF</span> </div> </label> </div>

Answer 1

Try to use below code:-

$(document).ready(function(){
    $("input[type='radio']").click(function(){
        var radioValue = $("input[name='currency-is']:checked").val();
        if(radioValue){
            alert("Your are a - " + radioValue);
        }
    });
});

You'll get the radio button value. Let me know if this helps you...

Answer 2

CSS (add these extra classes):

.maincar__currency label{
    display: none;
}
.expanded label{
    display: block;
}

JS & Html:

$('.maincar__currency').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
});

$(".maincar__currency label").click(function(){
    $('#' + $(this).attr('for')).prop('checked', true);
    var selected = $('input[name=currency-is]:checked').val(); // <-- add this line
    $('.active_currency').text(selected.toUpperCase());  // <-- and this line
    alert(selected);
});

$(document).click(function() {
  $('.maincar__currency').removeClass('expanded');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="maincar__currency"> <div class="active_currency">EUR</div> <label for="euro-radio-is"> <div class="currency currency__euro"> <img src="/assets/images/icons/euro.png" alt="Euro sign"> <input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" /> <span class="default">EUR</span> </div> </label> <label for="dollar-radio-is"> <div class="currency currency__dollar"> <img src="/assets/images/icons/dollar.png" alt="Dollar sign"> <input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" /> <span>USD</span> </div> </label> <label for="gbp-radio-is"> <div class="currency currency__pound"> <img src="/assets/images/icons/pound-sterling.png" alt="Pound sign"> <input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" /> <span>GBP</span> </div> </label> <label for="chf-radio-is"> <div class="currency currency__chf"> <img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign"> <input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" /> <span>CHF</span> </div> </label> </div>