验证 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>

确保一组无线电输入具有相同的名称！ 给它们起不同的名称意味着您将能够选择多个无线电输入：

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

Answer 2

我同意上面的建议，但如果您不想这样做，您可以使用以下代码实现相同的效果；

<script>
$("input[type=checkbox]").click(function() {
    $( "input[type=checkbox]" ).prop( "checked", false );
    $(this).prop("checked", true);
});
</script>

工作 JSFiddle http://jsfiddle.net/9kxoc2g6/1/