javascript - 验证 jQuery 中的复选框组

Question

我正在根据每页 30 行的表中的建议生成复选框。一行可以有 0 个建议，也可能有 100 个建议。我想使用 jQuery 只允许用户选择一个复选框。如果他们选择了一项，然后又改变了主意，则原始复选框将被取消选中，而新复选框将被选中。

Answer 1

您正在寻找的是 radio 输入。

<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>

确保一组 radio 输入具有相同的名称! 给它们不同的名称意味着您将能够选择多个 radio 输入:

<label><input type="radio" name="testRadio1" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio2" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio3" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio4" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio5" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio6" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio7" value="Test"/>Test</label>

这是不可取的。

如果您确实想要复选框，请使用以下 CSS:

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}

    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>
    <label><input type="radio" name="testRadio" value="Test"/>Test</label>