选中复选框php时显示div

我有一个记录集中的记录列表：

 <?php while($row = mysqli_fetch_array($result_imprint))  
{ ?> 
    <tr><td><input type="checkbox" id="location_<?php echo $row['location_id']; ?>" name="location_[<?php echo $row['location_id']; ?>]" value="location_<?php echo $row['imprint_location']; ?>"/> </td>
    <td><?php echo $row['imprint_location']; ?></td>
    <td><?php echo $row['max_size']; ?></td>
    <td><?php echo $row['imprint_type']; ?> </td>
    <td> <?php echo $row['max_colours']; ?></td>
    <td><?php echo $row['setup_fee']; ?></td></tr>
<?php } ?>    

如果有人从这些记录中选中一个复选框，我不知道如何显示div。最多有六条记录，我已经完成了分区：

    <div class="location_1" id="location_1" style="display: none;">
<br /><hr class="style-seven">
Content Here
</div>

满足于此

这是我使用的代码，但似乎不起作用：

$(document).ready(function(){
$('#location').change(function(){
        if(this.checked)
            $('#location_[<?php echo $row['location_id']; ?>]').fadeIn('slow');
        else
            $('#location_[<?php echo $row['location_id']; ?>]').fadeOut('slow');

    });
});

$（文档）.ready（函数（）{
$（'#位置'）。更改（函数（）{
如果（选中此项）
$（'#location_[]）.fadeIn（'slow'）；
其他的
$（“#位置[]”）.fadeOut（'slow'）；
});
});

非常感谢您的帮助。

---

谢谢当前您的php代码将被解释为字符串

尝试将代码更改为：

$('#location_['+<?php echo $row["location_id"]; ?>+']').fadein('slow')

$（'#location.['+']）.fadein（'slow'））

分别用于淡出。

    <tr><td>
<input type="checkbox" id="location_<?php echo $row['location_id']; ?>" name="location_[<?php echo $row['location_id']; ?>]" class="check"/> </td>

$(document).ready(function(){
$('#location').change(function(){

        if((.check).is(":checked"))

            $('#location_[<?php echo $row['location_id']; ?>]').fadeIn('slow');
        else
            $('#location_[<?php echo $row['location_id']; ?>]').fadeOut('slow');

    });
});

首先。。。ID在您的页面上必须是唯一的。因此，您不能先有一个id为=“location\u 1”的复选框，然后再有一个id为“location\u 1”的div

所以要有id为“location\u X”的复选框和带有“div\u location\u X”的div

我也会停止在javascript上使用php，除非您对php脚本执行ajax调用，或者执行循环来为每个复选框编写所有javascript，但这样做更简单：

选中时（使用一个类将所有复选框分组在一起），您可以获取javascipt以获取复选框的id属性

    <input type="checkbox" id="location_1" name="location_1" class="check"/> </td>

$(document).ready(function(){
$('.check').change(function(){

if((.check).is(":checked"))
    var div_name = $(this).attr('id'); //this should come back with location_1 for the first checkbox
    $('#div_'+div_name+'').fadeIn('slow'); // prepend div_ for the corrent unique id name
else
    $('#div_'+div_name+'').fadeOut('slow');
  });
    });


$（文档）.ready（函数（）{
$（'.check'）.change（函数（）{
如果（（.check）.is（“：checked”））
var div_name=$（this）.attr（'id'）；//对于第一个复选框，应该返回位置_1
$（'#div_'+div_name+''）.fadeIn（'slow'）；//为相应的唯一id名称添加div_'/prepend
其他的
$（'div#u'+div_name+''）.fadeOut（'slow'）；
});
});

使用chrome工具控制台调试
1。div和复选框的id不能相同，因此我将div id更改为location\u div

$(document).ready(function(){
$(":checkbox").click(function () {

if($("input[id^='location_']:checkbox:checked").length>0)
{
    $("#location_div").removeAttr('style');
}
else
{
    $("#location_div").css({"display":"none"});
}


    });
});