Reputation: 78
In one php file I have this image which has class name "notselected".
I have several checkboxes in other php file.
Content of the second php file is loaded with ajax into a div in first php file.
I want to change image class to "selected" if any checkboxes in loaded content is clicked/selected.
My code in first php file:
<img id="image" src="empty.png" class="notselected" />
.notselected {
width: 340px;
height: 91px;
background: url(image.png) 0px 0px no-repeat;
cursor:not-allowed;
}
.selected {
width: 340px;
height: 91px;
background: url(image.png) 0px -91px no-repeat;
cursor:pointer;
}
My code in second php file:
foreach ($examples as $example)
{
echo '<input id="select" class="checkbox" type="checkbox" name="example" value="example" />';
}
can anyone help me please?
Upvotes: 0
Views: 91
Reputation: 78
actually this works:
$(document).ready(function()
{
var rejestruj=0;
$(".checkbox").each(function(i, obj) {
$(obj).change(function()
{
if ( $(obj).attr('checked') == true)
{
rejestruj++;
$("#image").addClass("selected");
}
else
{
rejestruj--;
if (!rejestruj) $("#image").removeClass("selected");
}
});
});
});
thx all!
Upvotes: 0
Reputation: 4201
you can do that with jquery easily just add click event to check box and toggle the select
class
$(".checkbox").change(function () {
$("#image").toggleClass("selected");
});
here a demo
Upvotes: 1