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

我建议你改为使用onclick，而不是直接在DOM内的每个input上对eventListeners个侦听器进行硬编码。请注意，jQuery不是必需的。

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

在Jquery

2 个答案: