想要獲取復選框的值并將其值分配給類名-有解無憂

在 div 中，我有一個“全選”復選框。選中此復選框后，所有其他復選框將自動選中。我想將它們的值分配為類名。I am able to achieve this when a single checkbox is checked. 但是現在我希望在選中全選復選框時立即選中所有復選框時，這應該起作用。

$('.select-all').on('click', function() {
  let isSelected = $(this).is(':checked');
  $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
    if (isSelected) {
      $(this).prop('checked', true);
    } else {
      $(this).prop('checked', false);
    }
  })
});

$('input:checkbox').not('.select-all').change(function() {
  var cl = $(this).val();
  var cls = 'abc'   ''   cl   '';
  if ($(this).is(':checked')) {
    $(this).addClass(cls);
  } else {
    $(this).removeClass(cls);
  }
})

<div class="checkbox-list">
  <label><input type="checkbox" class="select-all" name="">All</label>
  <label><input type="checkbox" name="" value="1">One</label>
  <label><input type="checkbox" name="" value="2">Two</label>
  <label><input type="checkbox" name="" value="3">Three</label>
  <label><input type="checkbox" name="" value="4">Four</label>
  <label><input type="checkbox" name="" value="5">Five</label>
  <label><input type="checkbox" name="" value="6">Six</label>
  <label><input type="checkbox" name="" value="6">Three</label>
  <label><input type="checkbox" name="" value="7">Four</label>
  <label><input type="checkbox" name="" value="8">Five</label>
  <label><input type="checkbox" name="" value="9">Six</label>
</div>

uj5u.com熱心網友回復：

你很可能寫的代碼已經達到了這一點，我在這里做什么是添加cl = $(this).val();并且cls = 'abc' '' cl '';在每個回圈，當添加的類別isSelected是真實的，并洗掉假時。

$('.select-all').on('click', function() {
    let isSelected = $(this).is(':checked');
    $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
        let cl = $(this).val();
        let cls = 'abc'   ''   cl   '';
        if (isSelected) {
            $(this).prop('checked', true);
            $(this).addClass(cls);
        } else {
            $(this).prop('checked', false);
            $(this).removeClass(cls);
        }
    })
});

$('input:checkbox').not('.select-all').change(function() {
    let cl = $(this).val();
    let cls = 'abc'   ''   cl   '';
    if ($(this).is(':checked')) {
        $(this).addClass(cls);
    } else {
        $(this).removeClass(cls);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-list">
    <label><input type="checkbox" class="select-all" name="">All</label>
    <label><input type="checkbox" name="" value="1">One</label>
    <label><input type="checkbox" name="" value="2">Two</label>
    <label><input type="checkbox" name="" value="3">Three</label>
    <label><input type="checkbox" name="" value="4">Four</label>
    <label><input type="checkbox" name="" value="5">Five</label>
    <label><input type="checkbox" name="" value="6">Six</label>
    <label><input type="checkbox" name="" value="6">Three</label>
    <label><input type="checkbox" name="" value="7">Four</label>
    <label><input type="checkbox" name="" value="8">Five</label>
    <label><input type="checkbox" name="" value="9">Six</label>
   </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359123.html

標籤：javascript html 查询算法逻辑

上一篇：遺傳演算法：收斂問題

下一篇：這是什么意思？“nums[-1]=nums[n]=-∞”