javascript - 当选中/选择框为 'checked' 时更改父 div 的背景颜色

Question

我在静态页面上有一系列 HTML 复选框。我需要添加功能；如果选中一个复选框，则立即内联将父 div(或包装 div)背景容器颜色更改为绿色

我有现有的功能和行为，其中选中的框生成为 pdf，而未选中的 pdf 隐藏。我还在选择时交换这些包装器 div 中的 html 内容。现在我只想用这些选择切换背景颜色样式。因此添加此功能不会破坏之前的功能。

JS:

$(document).ready(function() {

texts = {
    item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  }
  $("#container").css('background', '#fff')

   $('.download-pdf').click(function() {

    notChecked = $("input[type=checkbox]:not(:checked)").parent();
    notChecked.hide();
    yesChecked = $("input[type=checkbox]:checked").parent();

    $.each(yesChecked, function( index, el ) {
      $(el).show().html(texts[$(el).attr('id')]);
    });

   var pdf = new jsPDF('p', 'pt', 'a4');

    pdf.addHTML(document.getElementById('records'), function() {
        // add here

        setTimeout(function(){
         location.reload();
         },3000);

    }); 

    var file = 'test';
    if (typeof doc !== 'undefined') {
        doc.save(file + '.pdf');
    } else if (typeof pdf !== 'undefined') {
        setTimeout(function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

        }, 2000);
    } else {
        alert('Error 0xE001BADF');
    }

 });
});

div 标记如下所示:

<div class="row" id="item1" class="box">
    Item 1 Details for the PDF test.<br>

    <input type="checkbox" id="check1" name="sample[]" value="red"/> <em>This</em> is a checkbox1
             <br />

</div>

Answer 1

http://codepen.io/anon/pen/YwXpLy

$('#check1').on('click', function() {
  if ($(this).is(':checked'))
    $(this).parent('div').css('background-color', 'green');
  else
    $(this).parent('div').css('background-color', '');
});