Question

我要寻找的是，当我选中“所有”时，所有其他元素都被选中，而当我取消选中时，所有其他元素都未被选中。

$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + " ";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">
  <dt>
    <a>
      <span class="hida">Choisir :</span>
      <p class="multiSel"></p>
    </a>
    </dt>
  <dd>
    <div class="mutliSelect">
      <ul>
        <li> <input type="checkbox" name="ALL" value="All"> All</li>
        <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
        <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
        <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
      </ul>
    </div>
  </dd>
</dl>

https://jsfiddle.net/8kwb54md/1/

Answer 1

我通过复选框将您的HTML减少到了列表中

document.querySelector('[name=ALL]').addEventListener('change', (e) => {
  let checkboxes = e.target.closest('ul').querySelectorAll('input[type=checkbox]');
  Array.from(checkboxes).forEach((cb) => {
    cb.checked = e.target.checked;
  });
})

<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

如果您坚持使用jQuery，请继续：

$('[name="ALL"]').on('change', function() {
  var self = this;
  $(this).closest('ul').find('input[type="checkbox"]').each(function() {
    this.checked = self.checked;
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

Answer 2

您应该查看each()

这里有一些帮助：

$('[name="ALL"]').on('click', function(){
    $('.mutliSelect input[type="checkbox"]').each(function(){
        $(this).prop('checked') ?  $(this).prop('checked','') : $(this).prop('checked','checked')
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="mutliSelect">
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

Answer 3

$(".mutliSelect input:checkbox").first().click(function(){
    $('.mutliSelect input:checkbox').not(this).prop('checked', this.checked);
});

此代码将选择第一个输入复选框，将其挂接到click事件，然后它将选中所有其余复选框，但不选中第一个复选框；如果选中了第一个复选框，则将选中所有复选框，否则取消选中所有复选框。 / p>

勇气。

Answer 4

如果未选中任何选项，则需要取消选中所有复选框。

var checkBoxAll = $('ul li> input[name="ALL"]');
var checkBoxOptions = $('ul li> input:not([name="ALL"])');
checkBoxAll.on('change', function() {
  var self = this;
  $(this).closest('ul').find('input[type="checkbox"]').each(function() {
    this.checked = self.checked;
  })
})

// to check or uncheck All checkbox, if all the options are checked.
checkBoxOptions.on('change', function() {
    var isAllChecked = true;
  
  // to find if any of the options is false.
  $(this).closest('ul').find('li> input:not([name="ALL"])').each(function() {
    if (!this.checked) return isAllChecked = false;
  })
  
  checkBoxAll.get(0).checked = isAllChecked;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

如何使用jquery选中所有复选框？

4 个答案: