Question

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

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

<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

请记住，有背景;在您的情况下，每对复选框都在表单元素中：

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

Demo

Answer 3

如果您想制作一个＆＃34;一个组复选框＆＃34;，请为它们指定与文档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>

但是，如果你想在每个＆＃34; group＆＃34;中只选择一个项目，你最好使用单选按钮。

不同的复选框

3 个答案: