如果选中复选框，则添加类，并使用jquery将类分配给它的父div

Question

我需要将一个类添加到已选中复选框的父div中，例如单击按钮我想检查相应父div内的选中复选框，当有选中的值时，应添加一个新类到它的父div。 例如HTML代码

<div class="parent">
    <input type="checkbox" name="a" />
    <input type="checkbox" name="b" />
</div>
<div class="parent">
    <input type="checkbox" name="c" />
    <input type="checkbox" name="d" />
</div>
<button>Add Class to parent div</button>

Answer 1

使用:has()，从父母的角度来看，你可以做到

$('button').click(function(){
    $('.parent:has(:checked)').addClass('my-class');
    $('.parent:not(:has(:checked))').removeClass('my-class');
});

＆＃13;

＆＃13;

$('button').click(function(){
    $('.parent:has(:checked)').addClass('my-class');
    $('.parent:not(:has(:checked))').removeClass('my-class');
});

＆＃13;

.my-class{
  background:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
    <input type="checkbox" name="a" />
    <input type="checkbox" name="b" />
</div>
<div class="parent">
    <input type="checkbox" name="c" />
    <input type="checkbox" name="d" />
</div>
<button>Toggle Class to parent div</button>

＆＃13;

＆＃13;

＆＃13;