Adding select/deselect all to dynamic tabular form

Question

I have a form which contains buttons to add and delete rows. My javascript function to check all checkboxes works for the first row, but once I add more rows to the form, the first row is still the only one that gets checked.

Any tips?

Here is my javascript function:

<code>
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var on = false;
if(masterCheck.checked==true) {
    document.getElementById('checkbox').checked=true;
} else {
    document.getElementById('checkbox').checked=false;
}
}
</code>

And here is the form: http://crimsonroot.com/files/freelance/new.html

Any help is appreciated!

possible duplicate of [Get multiple elements by Id](http://stackoverflow.com/questions/5338716/get-multiple-elements-by-id) — link64, Jul 14 '15 at 01:43
The getElementById() method only accesses the first element with the specified id. You shouldnt be giving elements the same id's. — link64, Jul 14 '15 at 01:43
getElementById() will only ever return one element. You'll have to search by element class or type, and then loop through all the results. (Or use jquery to simplify this) — m69's been on strike for years, Jul 14 '15 at 01:44

score 1 · Accepted Answer · answered Jul 14 '15 at 04:44

I found out what was wrong! @Mohammed your answer really helped. There were just one or two syntax errors that I found. In order to check and uncheck all of the boxes, I needed to add a boolean variable as an input to the function as follows:

//checks all rows
function checkAll(bool) {
    var masterCheck = document.getElementById('masterCheck');
    var allcheck = document.getElementsByClassName('checkbox');
    var on = false;
    for (var i = 0; i < allcheck.length; i++) {
        if (masterCheck.checked == true) {
            allcheck[i].checked = true;
        } else {
            allcheck[i].checked = false;
        }
    }

}

For some reason, this was the final piece to the puzzle. Thanks for all of the help!

score 0 · Answer 2 · answered Jul 14 '15 at 01:52

0

You should try something like this.

$("#masterCheck").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });

answered Jul 14 '15 at 01:52

vanburen

21,502
7
28
41

This looks great. I'm having trouble getting it to work though. If I have the jQuery for Bootstrap on the form already do I need to add anything else to the document to get it to work? – Gabriel Jul 14 '15 at 02:35

Hamza Dhamiya · Answer 3 · 2015-07-14T18:32:19.160

0

Since document.getElementById() returns first element, because id cannot be used more than one. To make it usable, add a class checkbox and try the following code:

//checks all rows
function checkAll() {
    var masterCheck = document.getElementById('masterCheck');
    var allcheck = getElementsByClassName('checkbox');
    var on = false;
    for (var i = 0; i < allcheck.length; i++) {
        if (masterCheck.checked == true) {
            allchecked[i].checked = true;
        } else {
            allchecked[i].checked = false;
        }
    }
}

edited Jul 14 '15 at 18:32

answered Jul 14 '15 at 01:54

Hamza Dhamiya

1,269
1
10
17

This looks awesome! For some reason it's not working...I changed the id to class="checkbox". Does it have something to do with the fact that the rows don't exist until the add row button is clicked? – Gabriel Jul 14 '15 at 02:37

Adding select/deselect all to dynamic tabular form

3 Answers3