使用 Javascript 使用相同的 ID 选中复选框

Question

这是我的代码，用于检查具有相同 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" />

这是我的 javascript 代码。我需要在触发此功能时选中此复选框。帮帮我！..

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

Answer 1

HTML 中的 ID 必须是唯一的。

因为您已经指定了名称 MassApprove，请使用 Document.getElementsByName()、

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

您可以使用简单的 for 循环进行迭代

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

Answer 2

您没有相同的 ID，也不应该，因为 ID 必须是唯一的。您有相同的 NAME，这很好。 -
不要使用 getElementById 作为名称，而是使用 document.getElementsByName 这将 return 一个可以循环的集合

像这样

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

Answer 3

只是为了好玩，您可以使用一些现代浏览器的优点：

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

并带有箭头函数：

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

使用 Javascript 使用相同的 ID 选中复选框

Making checkboxes checked using same id using Javascript

javascript

checkbox

checked