Question

我有一个列出了用户的表单，每个用户的名字下面都有复选框。我希望每个用户都有一个按钮，可以选中所有用户复选框。

这是动态创建的按钮代码和动态创建的复选框。包含的函数具有表单名称，复选框ID的开头和复选框值作为参数。

<input type="button" onclick="SetAllCheckBoxes('form1', '<? echo $row['ID']; ?>_', true);" value="Check All">

<input name="<? echo $userID?>_<? echo $checkboxNumber ?>" type="checkbox" id="<? echo $userID?>_<? echo $checkboxNumber  ?>" value="1" />

我需要onclick功能，点击后会点击所有想要的用户复选框。我想我需要某种形式的正则表达式来选择例如：所有以12_或15 _

开头的复选框

Answer 1

如果您为按钮指定一个名称，该名称是复选框名称的用户ID部分，则可以执行以下操作：

<button type="button" name="userFoo" onclick="setCheckboxes(this)" ...>Check 'em</button>

然后在函数中：

function setCheckboxes(element) {
  var re = new RegExp('^' + element.name + '_');
  var controls = element.form.elements;

  for (var i=0, iLen=controls.length; i<iLen; i++) {
    if (re.test(controls[i].name)) {
      controls[i].checked = true;
    }
  }
}

一些测试HTML：

<form>
  <button name="foo" type="button" onclick="setCheckboxes(this)">Check 'em</button>
  <input type="checkbox" name="foo_1">1
  <input type="checkbox" name="foo_2">2
  <input type="checkbox" name="foo_3">3
  <br>
  <button name="bar" type="button" onclick="setCheckboxes(this)">Check 'em</button>
  <input type="checkbox" name="bar_1">1
  <input type="checkbox" name="bar_2">2
  <input type="checkbox" name="bar_3">3
</form>

如果您要在每个用户ID的复选框上放置一个类，那么该函数可能是：

function setCheckboxes(element) {
  var controls = element.form.querySelectorAll('input.' + element.name);
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    controls[i].checked = true;
  }
}

或在现代浏览器中（但不是IE8）：

function setCheckboxes(element) {
  var controls = element.form.querySelectorAll('input.' + element.name);
  [].forEach.call(controls, function(el){el.checked = true});
}

按钮选择基于字符串开头的复选框 - Javascript

1 个答案: