如果选中表格复选框，取消选中其他表格复选框？

Question

我有很多表格，当一个复选框被选中时 - 所有其他表格都应该清除。您可以选中此表中的任意数量的复选框，但一次只能选中一个表中的复选框。 我该怎么做呢？如果可能，我想避免使用 id，因为我有 8 个表。

http://jsfiddle.net/69o3e5y4/

$('input[type=checkbox]').on('click', function () {

});

Answer 1

你可以：

1. 获取包含表$(this).closest("table")
2. 然后获取所有其他表：$("table").not($table)
3. 最后，取消选中这些表中的所有输入：... .prop("checked", false)。

这应该给出一些这样的代码：

$('input[type=checkbox]').on('click', function () {
    var $table = $(this).closest("table");    // Current table

    $("table").not($table)                    // Other tables
        .find("input[type=checkbox]:checked") // Checked input of these tables
        .prop("checked", false);              // Uncheck them
});

看到这个小提琴：http://jsfiddle.net/69o3e5y4/2/

Answer 2

此 jquery 无需任何 id 即可工作：

$('table').each(function(index){    
        $(this).find('input').each(function()
        {
           $(this).on('click', function () {          
            clearThisTablesCheckboxes(index);
           });

        });
 });

function clearThisTablesCheckboxes(position){
     $('table').each(function(index){ 
            $(this).find('input').each(function()
            {
                if(position != index)
                {
                    var prop=false;
                    $(this).prop('checked',prop);
               }
            });   
     });

}

http://jsfiddle.net/csdtesting/69o3e5y4/8/

Answer 3

我还没有尝试过，但我会使用类。因此，您在 Table1 中的所有复选框都属于“Table1”类，Table2 中的所有复选框都属于“Table2”类，等等。

然后，在您已经拥有的事件处理程序中，您可以遍历页面上的每个复选框，如果它们的类与被单击的类不匹配，则取消选中所有复选框。

例如（同样，未测试）：

        $("input[type=checkbox]").click(function () {
            if ($(this).prop("checked") == true){
                var CurrentClass = $(this).prop("class");

                $("input[type=checkbox]").each(function () {
                    if ($(this).prop("class") != CurrentClass)
                        $(this).prop("checked", false);
                });
            }
        });