JavaScript and HTML

Question

I want the javascript to check only elements from one table if checked the corresponding table's checkbox only. JavaScript i have selects all rows from all the tables generated from a cgi script.

You can see multiple tables with information listed. If you select the checkbox of any below geneID, it checks all even from the other tables contents too. one possible problem i figured out is i have assigned same table id for all the tables, but as this is auto generated from a previous cgi script, i certainly cant find any possible solution to overcome it. Thank you any suggestions or comments are highly accepted.

<script type="text/javascript" language="javascript">
    function SetAllCheckBoxes(ele) {
        var checkboxes = document.getElementsByTagName('input');
        if (ele.checked) {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = true;
                }
            }
        } else {
            for (var i = 0; i < checkboxes.length; i++) {
                console.log(i)
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;
                }
            }
        }
    }
</script>

Change var checkboxes = document.getElementsByTagName('input'); into selecting the correct table first, then find all the input elements inside that table only. Atm you select all the inputs on the screen, hence you check them all. — Shilly
– Shilly, Commented Aug 28, 2015 at 9:11
Having same id multiple times on single page is not a correct way, you should change your cgi script to correct that bug. — Nikhil Maheshwari
– Nikhil Maheshwari, Commented Aug 28, 2015 at 9:16
Yes definitely i looked into cgi-script, but couldn't find any possible way to correct as all tables inside one loop and retrieving information from a mysql database row by row, fixing table id tag i tried assigning a integer after item, like item1, item2 ... but it doesn't iterate and treats it as a string inside that tag. — Kanhu
– Kanhu, Commented Aug 28, 2015 at 9:23
Is there any way your CGI script could add a unique class to each table (such as table name), so you can identify the table you wish to iterate over? — Tro
– Tro, Commented Aug 28, 2015 at 10:28
Thank You, Tro! The answer by Raef Kandil solved my issue here. And i have assigned class for each table for external css. — Kanhu
– Kanhu, Commented Aug 28, 2015 at 11:45

Kanhu · Accepted Answer · 2015-08-28 10:21:56Z

1

If the code you cannot change, you need to get somehow the table element of the selected checkbox. In order to get that, you will have to alter the javascript function as follows:-

    <script type="text/javascript" language="javascript">
        function SetAllCheckBoxes(ele) {
            var checkboxes = ele.parentNode.parentNode.parentNode.getElementsByTagName('input');
            if (ele.checked) {
                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i].type == 'checkbox') {
                        checkboxes[i].checked = true;
                    }
                }
            } else {
                for (var i = 0; i < checkboxes.length; i++) {
                    console.log(i)
                    if (checkboxes[i].type == 'checkbox') {
                        checkboxes[i].checked = false;
                    }
                }
            }
        }
    </script>

First parentNode gets you the td, second parentNode gets you the tr, third parentNode gets you the table.

edited Aug 28, 2015 at 10:21

Kanhu

495 bronze badges

answered Aug 28, 2015 at 9:32

Raef Kandil

3071 silver badge12 bronze badges

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

3 Comments

Kanhu Over a year ago

Thank You, it generally works for only one table contents on the top. But how can i make it work for other generated tables as well? as you can see for each table i have created one checkbox below geneID.

Kanhu Over a year ago

Anyways, it gave me some idea how to make it work. Thank You

Raef Kandil Over a year ago

for the other tables, the javascript function is like this: <input type='checkbox' name="checkall" onClick="SetAllCheckBoxes(this.checked);"> instead of: <input type='checkbox' name="checkall" onClick="SetAllCheckBoxes(this);"> and this is why it does not work. Can you change this or is it a part of the generated code that you cannot change?

James · Accepted Answer · 2015-08-28 09:20:11Z

1

Since you have a separate form for each table you can make use of that to locate only the inputs on that form. Also you don't need the if - just set the checkboxes' checked states to that of ele.

function SetAllCheckBoxes(ele) {
    var checkboxes = ele.form.getElementsByTagName('input');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
            checkboxes[i].checked = ele.checked;
        }
    }
}

answered Aug 28, 2015 at 9:20

James

22.4k5 gold badges30 silver badges44 bronze badges

1 Comment

Kanhu Over a year ago

Hello James, Thank You very much for your valuable suggestions. I have tried with that but couldn't fix of selecting only rows from one table at a time.

Collectives™ on Stack Overflow

JavaScript and HTML

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related