时间戳

首页 > 解决方案 > 将类添加到父 div，其中包含带有值的输入复选框

jquery - 将类添加到父 div，其中包含带有值的输入复选框

问题描述

我有以下代码

<div class="subjects-list">
  <input type="checkbox" class="subject" value="Math">
</div>

<div class="subject-list">
  <input type="checkbox" class="subject" value="Sports">
</div>

我有复选框值。我想用“subjects-list”类将类“taken”添加到 div 并输入指定的值。如果有完美的方法来做到这一点呢？

例如，如果值“体育”

<div class="subjects-list">
  <input type="checkbox" class="subject" value="Math">
</div>

<div class="subject-list taken">
  <input type="checkbox" class="subject" value="Sports">
</div>

解决方案

我在准备好的文件上运行：

  $('input[type=checkbox]').each(function(index,item){
       var subject = $(item).val();
       if(subject == 'Sports'){
            $(item).parent().addClass('taken');
        }
    });

标签： jquery

解决方案

如果您想在选中时将类添加到父级到 div，请执行此操作。

$('input[type=checkbox']).on('change', function() {
  if ($(this).prop('checked') {
    $(this).parent().addClass('taken');
  } else {
    $(this).parent().removeClass('taken');
  }
});

或者，如果您只想按值添加类

$('input[type=checkbox']).each(function(index, item) {
  var subject = $(item).val();
  if (subject == 'Sprots') {
    $(item).parent().addClass('taken');
  }
});

推荐阅读