show div on checkbox checked php - php

Question

i have a list of records from a recordset :
<?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 } ?>
I can't figure out how to show a div if someone checks a box from one of these records. there are a max of six records, I have the div's already done out :
<div class="location_1" id="location_1" style="display: none;">
<br /><hr class="style-seven">
Content Here
</div>
This is the code i used but it doesn't seem to work :
$(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');
});
});
any help much appreciated.
thanks

Answer 1

For starters... IDs have to be unique on your page. So you cannot have a checkbox with id="location_1" and then have a div with also an id of "location_1"
So have checkboxes with id "location_X" and your divs with "div_location_X"
I would also stop using php on javascript, unless you do a ajax call to a php script or you do a loop to write all the javascript for each of the checkboxes, but it would be simpler to:
when checked (use a class to group all the checkboxes together), you can get javascipt to get the id attribute of the checkbox
<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');
});
});
Use chrome tools console for debugging

Answer 2

currently your php code will get interpreted as a string.
try changing your code to:
$('#location_['+<?php echo $row["location_id"]; ?>+']').fadein('slow')
and respectively for fade out.

Answer 3

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

Answer 4

1.You can't have same id for div and check box,so i am changing div id to location_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"});
}
});
});