javascript - 使用 jQuery 检查名称未知时检查的所有单选组

Question

正在开发一个表单验证函数，该函数会生成一个空字段列表和一个错误填充字段列表。该脚本非常适合文本和文本区域。当我将以下方法应用于单选按钮时:

$("input:radio[name]").each(function() {
    $(this).removeClass("error");     // Remove previously-applied error class
    if($(this).filter(":checked").length == 0) {       // Make sure they chose an option.
        emptys[j] = nameFix($(this).attr("name"));     // Add to array, apply error class
        $(this).addClass("error");                     // increment placeholder and exit
        j ++;                                          // the function
        return;
    } else {
        return;
    }
}); // end radio each

未答复的 radio 组在 emptys 中产生 2 个索引和已回答单选组生成 1 个索引(我正在用户指示测试是否通过或失败的页面上进行测试)。

到目前为止，我发现的普遍接受的答案都假设我将使用我给出的特定属性 <input>我的 JS 中的标签。我正在构建的网站将有数十种需要验证的各种表单，因此我正在尝试生成一个普遍适用的脚本来检查它们的有效性。

编辑:HTML 示例

<tr>
        <td class="borderRight">Methane Overpressure</td>
        <td>Target Pressure &#40;psi&#41;</td>
        <td>300</td>
        <td>&#177; 1.0</td>
        <td class="input"><input type="text" name="Target-Pressure" class="num" size="2" maxlength="5"></td>
        <td class="input"><input type="radio" name="Target-Pressure-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Target-Pressure-Pass-or-Fail" value="0"></td>
    </tr>
    <tr>
        <td class="borderRight">Magnet</td>
        <td>Magnetic Field Strength &#40;T&#41;</td>
        <td>4.5</td>
        <td>&#177; 0.5</td>
        <td class="input"><input type="text" name="Magnetic-Field-Strength" class="num" size="2" maxlength="4"></td>
        <td class="input"><input type="radio" name="Magnetic-Field-Strength-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Magnetic-Field-Strength-Pass-or-Fail" value="0"></td>
    </tr>
    <tr>
        <td rowspan="2" class="borderRight">Acceleration</td>
        <td>Radio Frequency &#40;MHz&#41;</td>
        <td>68</td>
        <td>&#177; 0.1</td>
        <td class="input"><input type="text" name="Radio-Frequency" class="num" size="2" maxlength="5"></td>
        <td class="input"><input type="radio" name="Radio-Frequency-Pass-or-Fail" value="1"> P</td>
        <td class="input">F <input type="radio" name="Radio-Frequency-Pass-or-Fail" value="0"></td>
    </tr>

Answer 1

一个简单的方法(在您的问题中附加 HTML 之前编写)是:

function checkForChecked() {
        // use $.unique() to get the unique values from an array (created within),
        // gets all inputs of type="radio" with a 'name' attribute,
        // creates a map of those elements' names, uses 'get()' to make that a
        // real array
        var radioGroups = $.unique($('input[type="radio"][name]').map(function () {
            return this.name;
        }).get());

        // iterates over the array of group names ('a' is the current array element)
        radioGroups.forEach(function (a) {
            // caching the radio-inputs of the current name:
            var sel = $('input[type="radio"][name="' + a + '"]');
            // gets the parent elements of those radios (here the 'label' elements),
            // if there are no radio inputs checked we call the 'addClass' method,
            // otherwise the 'removeClass' method, and add/remove the 'requiredStill'
            // class. This can be adjusted to do otherwise as you need.
            sel.parent()[sel.filter(':checked').length === 0 ? 'addClass' : 'removeClass']('requiredStill');
        });
    }

    $('input').on('change', checkForChecked);

function checkForChecked() {

    var radioGroups = $.unique($('input[type="radio"][name]').map(function () {
        return this.name;
    }).get());

    radioGroups.forEach(function (a) {
        var sel = $('input[type="radio"][name="' + a + '"]');

        sel.parent()[sel.filter(':checked').length === 0 ? 'addClass' : 'removeClass']('requiredStill');
    });
}

$('input').on('change', checkForChecked);

label {
    display: block;
}
.requiredStill {
    border: 1px solid #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="a" />a</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="b" />b</label>
<label>
    <input type="radio" name="c" />c</label>
<label>
    <input type="radio" name="c" />c</label>
<label>
    <input type="radio" name="c" />c</label>

引用文献:

• addClass() .
• Attribute-equals ([attribute="value"]) selector .
• get() .
• $.unique() .
• map() .
• parent() .
• removeClass() .