检查asp net，bootstrap中的多个复选框

Question

我找到了一些关于在组中检查复选框的答案，但即使我将它复制到我的身边，它也不起作用。 我有复选框组的简单示例。 谁能解释一下我做错了什么？

var options = [];

$('.dropdown-menu a').on('click', function(event) {

  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  }

  $(event.target).blur();

  console.log(options);
  return false;
});

$("#checkAll").click(function() {
  $(".check").prop('checked', $(this).prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<div class="btn-group btn-group-sm">
  <input id="btnZatwierdz" class="btn btn-default btn-sm dropdown-toggle" type="submit" value="Filtruj" aria-haspopup="true" aria-expanded="false" onserverclick="btnZatwierdzClick" runat="server"></input>
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    <span class="glyphicon glyphicon-cog"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" class="small" data-value="option1" tabindex="-1">
        <input id="CheckboxHunting" type="checkbox" runat="server" />&nbsp;
        Hunting
      </a>
    </li>
    <li>
      <a href="#" class="small" data-value="option2" tabindex="-1">
        <input id="CheckboxFarming" type="checkbox" runat="server" />&nbsp;
        Farming
      </a>
    </li>
    <li class="dropdown-submenu">
      <a href="#" class="small" data-value="option1" tabindex="-1">
        <input id="checkAll" type="checkbox" />&nbsp;
        Hunting
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#" class="check" data-value="option1" tabindex="-1">
            <input id="Checkbox2" name="checkbox-2" type="checkbox" runat="server" />&nbsp;
            Hunting
          </a>
        </li>
        <li>
          <a href="#" class="check" data-value="option2" tabindex="-1">
            <input id="Checkbox3" name="checkbox-3" type="checkbox" runat="server" />&nbsp;
            Farming
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

试试这个

$("#checkAll").click(function() {
  $(this).closest("li").find("input[id^='Checkbox']").prop('checked', $(this).prop('checked'));
});

这将取$("#checkAll") 中最接近的li，然后找到所有以Checkbox 开头的inputs (id^='Checkbox')

var options = [];

$('.dropdown-menu a').on('click', function(event) {

  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  }

  $(event.target).blur();

  console.log(options);
  return false;
});

$("#checkAll").click(function() {
  $(this).closest("li").find("input[id^='Checkbox']").prop('checked', $(this).prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<div class="btn-group btn-group-sm">
  <input id="btnZatwierdz" class="btn btn-default btn-sm dropdown-toggle" type="submit" value="Filtruj" aria-haspopup="true" aria-expanded="false" onserverclick="btnZatwierdzClick" runat="server"></input>
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    <span class="glyphicon glyphicon-cog"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" class="small" data-value="option1" tabindex="-1">
        <input id="CheckboxHunting" type="checkbox" runat="server" />&nbsp; Hunting
      </a>
    </li>
    <li>
      <a href="#" class="small" data-value="option2" tabindex="-1">
        <input id="CheckboxFarming" type="checkbox" runat="server" />&nbsp; Farming
      </a>
    </li>
    <li class="dropdown-submenu">
      <a href="#" class="small" data-value="option1" tabindex="-1">
        <input id="checkAll" type="checkbox" />&nbsp; Hunting
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#" class="check" data-value="option1" tabindex="-1">
            <input id="Checkbox2" name="checkbox-2" type="checkbox" runat="server" />&nbsp; Hunting
          </a>
        </li>
        <li>
          <a href="#" class="check" data-value="option2" tabindex="-1">
            <input id="Checkbox3" name="checkbox-3" type="checkbox" runat="server" />&nbsp; Farming
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>