在jQuery中验证复选框组

Question

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

Answer 1

您正在寻找的是radio输入。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是不受欢迎的。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/