If table checkbox is checked, uncheck other table checkboxes?

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 () {

});

It sounds like radio buttons would be perfect for this. Is there a reason you dont want to use them instead? — Michael
– Michael, Commented Sep 23, 2014 at 17:14
@microsby0: "You can check any number of checkboxes in this table" — Dark Falcon
– Dark Falcon, Commented Sep 23, 2014 at 17:15
@DarkFalcon ah thank you, I did not notice that part. You could use classes, one class per table by chance? Its a little better than ids — Michael
– Michael, Commented Sep 23, 2014 at 17:16
How could you go about using classes/ids? I don't want a long string of if this is not table1, table2, table3, table4, etc — triplethreat77
– triplethreat77, Commented Sep 23, 2014 at 17:18

Samuel Caillerie · Accepted Answer · 2014-09-23 17:18:16Z

5

You can :

get the containing table $(this).closest("table")
then get all other tables : $("table").not($table)
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/

answered Sep 23, 2014 at 17:18

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

triplethreat77 Over a year ago

Furthermore, for each checkbox checked, can we log the .closest('td').next().html() being the name? So if only one is checked, "red" but if more than one add a comma "red, blue" and the last word should not have a comma "red, blue, ".

triplethreat77 Over a year ago

got it. $('input[type=checkbox]').on('click', function () { var $table = $(this).closest("table"); $("table").not($table).find("input[type=checkbox]:checked").prop("checked", false); var chklist = ""; $('input[type=checkbox]:checked').each(function () { var sThisVal = (this.checked ? "1" : "0"); chklist += (chklist=="" ? sThisVal : ", " + sThisVal); }); console.log (chklist); });

Giannis Grivas · Accepted Answer · 2014-09-23 17:49:13Z

0

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/

answered Sep 23, 2014 at 17:49

Giannis Grivas

3,4242 gold badges22 silver badges40 bronze badges

Comments

Stan Shaw · Accepted Answer · 2014-09-23 17:26:18Z

-1

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);
                });
            }
        });

answered Sep 23, 2014 at 17:26

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

3 Comments

PeterKA Over a year ago

-1 .prop('class')? What if the checkbox has more than one class?

Stan Shaw Over a year ago

prop("class") doesn't return a list - it returns a string (space delimited). If his checkboxes all have the same 5 classes, he could add a sixth (the table name) and this code will work. If the checkboxes have no classes, he could add one (the table name) and this code will work.

PeterKA Over a year ago

I understand. There are just too many variables (if's) so this does not sound like an ideal solution.

Collectives™ on Stack Overflow

If table checkbox is checked, uncheck other table checkboxes?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related