Making checkboxes checked using same id using Javascript

Question

This is my code to make check boxes checked with same id

<input type="checkbox" name="MassApprove" value="setuju2"  />
<input type="checkbox" name="MassApprove" value="setuju3"  />
<input type="checkbox" name="MassApprove" value="setuju4"  />
<input type="checkbox" name="MassApprove" value="setuju5"  />
<input type="submit" value="Next Step" name="next" />

And This is my javascript code. I need to make this checkboxes as checked when am trigger this function. Help me!..

    function doMassApprove(massApproveFlag) {
        var confirmAlert = confirm("Do You Need Mass Approve !..");
        var massApprove = document.getElementById("MassApprove").length();
        if (confirmAlert == true) {
            //alert(massApproveFlag);
            for (var i = 0; i < massApprove; i++) {
                document.getElementById("MassApprove").checked = true;
            }
        } else {
            document.getElementById("headerMassApprove").checked = false;
        }
    }

you need to set an "ID" to your elements if you use document.getElementById — messerbill
– messerbill, Commented Jul 31, 2015 at 12:27
I'm curious to which event and element would you like to attach the function and what was the idea behind the parameter massApproveFlag. — cezar
– cezar, Commented Jul 31, 2015 at 12:34

Satpal · Accepted Answer · 2015-07-31 12:29:06Z

1

IDs in HTML must be unique.

As you have already specified the name MassApprove, use Document.getElementsByName(),

Returns a nodelist collection with a given name in the (X)HTML document.

Which you can iterate using simple for loop

function doMassApprove(massApproveFlag) {
    var confirmAlert = confirm("Do You Need Mass Approve !..");

    if (confirmAlert) {
        //Get elements with Name
        var massApproves = document.getElementsByName("MassApprove");

        //Iterate and set checked property
        for (var i = 0; i < massApprove.length; i++) {
            massApproves[i].checked = true;
        }
    } else {
        document.getElementById("headerMassApprove").checked = false;
    }
}

answered Jul 31, 2015 at 12:29

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

mplungjan · Accepted Answer · 2015-07-31 12:31:14Z

1

you do not have the same ID and should not since ID must be unique. You have the same NAME and that is fine. -
Do not user getElementById for names, instead use document.getElementsByName which will return a collection you can loop over

Like this

function doMassApprove(massApproveFlag) {
    var massApprove = confirm("Do You Need Mass Approve !..");
    if (massApprove) {
      var checks = document.getElementsByName("MassApprove");
      for (var i=0; i < checks.length; i++) {
          checks[i].checked = massApprove; // or perhaps massApproveFlag?
      }
    }
    else {
      document.getElementById("headerMassApprove").checked = false;
    }
}

answered Jul 31, 2015 at 12:31

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

RobG · Accepted Answer · 2015-07-31 12:49:15Z

0

Just for the heck of it, you can use some modern browser goodness:

Array.prototype.forEach.call(document.querySelectorAll('[name=MassApprove]'), function(cb){cb.checked = true});

and with arrow functions:

 Array.prototype.forEach.call(document.querySelectorAll('[name=MassApprove]'), cb => cb.checked=true);

answered Jul 31, 2015 at 12:49

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Making checkboxes checked using same id using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related