具有不同复选框的不同框

Question

这是我的例子：http://hamzakhan.name/dev/eric/options/five/fiveage.html

如您所见，每个框中有两个复选框。我尝试通过在 html 表单代码下添加此脚本来从 make checkbox behave like radio buttons with javascript 添加此 javascript：

<script>
$(".agecb").each(function()
{
    $(this).change(function()
    {
        $(".agecb").prop('checked',false);
        $(this).prop('checked',true);
    });
});
</script>

但它不起作用。如您所见，当我尝试单击一个复选框然后单击下一个面板中的另一个复选框时，第一个未选中。我该如何解决？我希望它适用于每个面板。

Answer 1

您只需取消选中同一表单中的其他复选框，而不是所有复选框。您也不需要使用 .each()，jQuery 会在您调用事件绑定函数（以及对集合中的所有元素进行操作的大多数其他函数）时自动执行此操作。

$(".agecb").change(function() {
    $(this).closest(".ageform").find(".agecb").prop('checked', false);
    $(this).prop('checked', true);
});

Answer 2

如果你想制作一个"one group checkbox"，给它们取一个与文档中描述的相同的名字http://www.w3schools.com/tags/att_input_checked.asp

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

但是，如果您只想在每个项目中选择一项 "group"，您最好使用单选按钮。

Answer 3

请记住有上下文；在您的情况下，每对复选框都在一个表单元素中：

$('.agecb').on('change', function() {
    this.checked = true;
    $(this).closest('form').find('.agecb').not(this).prop('checked', false);
});

Demo

具有不同复选框的不同框

different boxes with different checkboxs

html

javascript

checkbox

jquery