未选中一个复选框时如何取消选中以下所有复选框

Question

我有一组已标记的动态复选框。当我从中单击一个时，应取消选中以下所有复选框，如果再次重新标记上述所有复选框标记。请问有没有人可以帮助我解决这个问题？

谢谢。

@for (int i = 0; i < Model.transportDate.Count(); i++)
{
                    <tr>
                        <td>
                            @Html.CheckBoxFor(Model => Model.transportDate[i].selection)
                        </td>
                        <td>
                            @Html.TextBoxFor(Model => Model.transportDate[i].Date)
                        </td>
                    </tr>
}

Answer 1

如果复选框被选中，您可以使用 javascript 检查。

因此，如果选中该复选框，则取消选中其他复选框：

document.getElementById("checkbox").checked = true; document.getElementById("checkbox").checked = false;

Answer 2

当您创建复选框时，您需要将它们存储在一个数组中，并为它们使用相同的 onClick 函数，参数是数组中 Chekbox 的索引。

当用户点击它时，你只需要循环遍历数组并根据需要更改状态。

伪代码示例：

let _checkboxesArray = [];
function createDynamicCheckboxes() {
  _checkboxesArray = [];
  for(let i = 0; i < Model.transportDate.Count(); i ++) {
    _checkboxesArray[i] = 'cb' + i;
    // create your checkbox and assign it the id we just stored.
    dCheckbox.id = _checkboxesArray[i];
    let li = i;
    dCheckbox.onClick = (function(index) {
      for (let j = 0; j < Model.transportDate.Count(); j ++) {
        document.getElementById(_checkboxesArray[j]).checked = j < index;
      }
    }(li));
  }
}

Answer 3

您可以使用javascript 在客户端执行此操作。见例子。

$('#tbl [type=checkbox]').click(function() {
  var $this = this; //save clicked chk
  if ($(this).is(':checked')) //nothing to do
    return;
  var uncheck = false;
  $(this).parents('table') //get container
    .find('[type=checkbox]') //get siblings
    .each(function() { //iterate
      if (this === $this) //found
        uncheck = true;
      if (uncheck)
        this.checked = false; //clear checkbox
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
  <tr>
    <td><input type="checkbox" checked="checked" /></td>
    <td>other</td>
  </tr>
</table>