CODEWITHSUNDEEP
javascriptphpcssclasscheckbox
orsz
orsz

Reputation: 78

how to change img class when any checkbox is selected?

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

Answers (2)

orsz
orsz

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

semirturgay
semirturgay

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

Related Questions