在复选框选中时更改图标类

Question

从下面的代码片段中，我想在使用jQuery选中复选框时更改图标类。

<div class="container">
<div class="item-1">Checkbox code here</div>
<div class="item-2">Icons here (using Img tag)</div>
</div>

注意：带有容器类的外部div 是重复的div。

Answer 1

如果要在选中复选框时更改类名。请参阅以下示例。

这是你的HTML像这样。

<div class="container">
<div class="item-1"><input type="Checkbox" name="1" class="check">1</div>
<div class="other-class item-2">Icons here (using Img tag)</div> <!-- You need to keep class name `other-class` for change the class name -->
</div>

这是jQuery代码。

jQuery(document).ready(function(){
$( '.check' ).on('click', function(){
if( $(this).is(":checked") ) {
$('.container .other-class').removeClass('item-2').addClass('your-class-name');
} else {
$('.container .other-class').removeClass('your-class-name').addClass('item-2');
}
});
});