Как снять все флажки ниже, когда снят один флажок

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

Когда вы создаете свои чекбоксы, вам нужно хранить их в массиве и использовать для них одну и ту же функцию 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 2

Вы можете сделать это на стороне клиента, используя 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>

Answer 3

Вы можете проверить с помощью javascript, установлен ли флажок.

Итак, если флажок установлен, снимите флажки с других:

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