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

Question

I have numerous tables, and when a checkbox is checked in one - all other tables should clear. You can check any number of checkboxes in this table, but only able to check checkboxes in one table at a time. How would I go about doing this? I want to avoid using ids if possible because I have 8 tables.

http://jsfiddle.net/69o3e5y4/

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

});

Answer 1

You can :

1. get the containing table $(this).closest("table")
2. then get all other tables : $("table").not($table)
3. finally, uncheck all inputs from these tables : ... .prop("checked", false) .

This should give some code like this :

$('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
});

See this fiddle : http://jsfiddle.net/69o3e5y4/2/

Answer 2

This jquery works without any ids:

$('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

I haven't tried this, but I would use classes. So all your checkboxes in Table1 would be class "Table1", all checkboxes in Table2 would be in class "Table2", etc.

Then, within the event handler you already have, you can iterate through each checkbox on the page, and uncheck all of them if their class doesn't match the one that was clicked.

For example (again, not tested):

        $("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);
                });
            }
        });