我需要重写的html在2 <p>标签，当我选中一个复选框。注意：<div class="summary">容器根据数据库的输出重复多次。

HTML**

<div class="summary">
    <div>Data 1</div>
    <div>Data 2</div>
    <div class="col_5"><input type="checkbox" /></div>
</div>
<div class="details">
    <p>label:</p><p>info</p>
    <p>label 2:</p><p>more info</p>
    <p class="jQuery1">another label to be changed:</p><p class="jQuery2">final info to be changed</p>
</div>

JavaScript（除了注解1和2之外，其他都可以工作）**

$(document).ready(function(){
    $('input:checkbox').change(function(event) {
        $(this).closest('div.col_5').html('Yes');
        $('div.details').next('p.jQuery1').html('Changed 1'); // c1 -- this does not work
        $('div.details').next('p.jQuery2').html('Changed 2'); // c2 -- this does not work
    });
    $('.summary').click(function(e){
        if ($("input:checked").length == 0) {
            $(this).next('.details').slideToggle('slow');
        }
    });
});