最「美」的功能，通過名稱jQuery中

Question

選擇單選按鈕，我仍然覺得有點混亂積極的jQuery選擇（設置）單選按鈕（有很多不同的方式來實現它）

我用這個功能setRadioButton(radioName, option)，讓我的名字和我要積極地選擇

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')">

選項來選擇一個單選按鈕有沒有更簡單的內置jQuery函數？ 這個功能好嗎？你可以提供哪些建議？

Answer 1

無需遍歷所有無線電輸入。您可以使用：

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

選擇特定的無線電由它的價值和它click。

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')">

Answer 2

而不是硬編碼在每個input直接在DOM內onclick聽衆，我會建議你使用eventListeners來代替。請注意0​​是沒有必要的。

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'>