當檢查/選擇框被選中時更改父div的背景顏色

我在靜態頁面上有一系列HTML複選框。我需要添加功能;如果選擇了一個複選框，立即在線父DIV（或包裝DIV）背景容器顏色更改爲綠色當檢查/選擇框被選中時更改父div的背景顏色

我有現有的功能和行爲，其中檢查框生成到PDF和非託運PDF文件隱藏。我也選擇這些包裝divs內的交換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 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>

來源

2015-12-09 Fred Randall

我看不出有任何的div在這裏（糾正我，如果我錯了）。你可以請張貼那些div的HTML嗎？ – Franco

嗨James Franco，在css'.green {background-color：green;}'中更新了 –

，然後獲得父母並執行'toggleClass（「green」）' –

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', ''); 
});

來源

2015-12-09 20:52:28 jnoreiga

當檢查/選擇框被選中時更改父div的背景顏色

回答

相關問題