CODEWITHSUNDEEP
javascriptjqueryradio-button
João Pimentel Ferreira
João Pimentel Ferreira

Reputation: 16233

The most "beautiful" function to select radio buttons by name in Jquery

I still find a bit confusing actively selecting (setting) radio buttons in jQuery (a lot of different ways to achieve it)

I use this function setRadioButton(radioName, option) which allows me to select a radio button by name and option which I want to actively select 

function setRadioButton(radioName, option){
    
    var $radios = $('input[type="radio"][name="'+radioName+'"]');
    for (var i=0; i<$radios.length; i++){        
        if($radios[i].value == option) {
            $radios[i].checked = true;
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

monthly
<input type="radio" name="period" value="monthly">
<br>
quarterly
<input type="radio" name="period" value="quarterly">
<br>
half yearly
<input type="radio" name="period" value="half_yearly">
<br>
yearly
<input type="radio" name="period" value="yearly">
<br><br>
<input type="button" value="select monthly" onclick="setRadioButton('period','monthly')">
<input type="button" value="select quarterly" onclick="setRadioButton('period','quarterly')">
<input type="button" value="select half_yearly" onclick="setRadioButton('period','half_yearly')">
<input type="button" value="select yearly" onclick="setRadioButton('period','yearly')">

Is there any simpler built-in jQuery function? Is this function ok? Which suggestions might you provide?

Upvotes: 0

Views: 285

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62743

No need to loop through all the radio inputs. You can use:

function setRadioButton(name, option){
   $('input[name="' + name + '"][value="'+option+'"]').click();
}

to select the specific radio by it's value and click it. 

function setRadioButton(name, option){
   $('input[name="' + name + '"][value="'+option+'"]').click();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

monthly
<input type="radio" name="period" value="monthly">
<br>
quarterly
<input type="radio" name="period" value="quarterly">
<br>
half yearly
<input type="radio" name="period" value="half_yearly">
<br>
yearly
<input type="radio" name="period" value="yearly">
<br><br>
<input type="button" value="select monthly" onclick="setRadioButton('period', 'monthly')">
<input type="button" value="select quarterly" onclick="setRadioButton('period', 'quarterly')">
<input type="button" value="select half_yearly" onclick="setRadioButton('period', 'half_yearly')">
<input type="button" value="select yearly" onclick="setRadioButton('period', 'yearly')">

Upvotes: 2

kind user
kind user

Reputation: 41893

Instead of hard-coding onclick listeners on every input directly inside the DOM, I would suggest you to use eventListeners instead. Note that jQuery is not necessary.

let checks = document.querySelectorAll('input[type="radio"]');
let btns = document.querySelectorAll('input[type="button"]');

Array.from(btns).forEach(v => v.addEventListener('click', () => {
  let option = v.getAttribute('data-attr');
  Array.from(checks).find(c => c.value == option).checked = true;
}));
monthly
<input type="radio" name="period" value="monthly">
<br>
quarterly
<input type="radio" name="period" value="quarterly">
<br>
half yearly
<input type="radio" name="period" value="half_yearly">
<br>
yearly
<input type="radio" name="period" value="yearly">
<br><br>
<input type="button" value="select monthly" data-attr='monthly'>
<input type="button" value="select quarterly" data-attr='quarterly'>
<input type="button" value="select half_yearly" data-attr='half_yearly'>
<input type="button" value="select yearly" data-attr='yearly'>

Upvotes: 1

Related Questions