想要获取复选框的值并将其值分配给类名

Posted 2023-05-08

【中文标题】想要获取复选框的值并将其值分配给类名

【英文标题】：Want to get the value of checkbox and assign it's value to the class-name

【发布时间】：2021-12-26 14:05:34

【问题描述】：

在 div 中，我有一个“全选”复选框。选中此复选框后，将自动检查所有其他复选框。我想将它们的值分配为类名。当检查单个复选框时，我能够实现此功能。但是现在我希望在选中全选复选框时同时选中所有复选框时这应该起作用。 ​

$('.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>

【参考方案1】：

您几乎已经编写了代码来实现这一点， 我在这里所做的是在每个循环中添加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>