Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

change images when unchecking a checkbox using jquery

Posted on 2013-05-18
7
Medium Priority
?
498 Views
Last Modified: 2013-06-14
Hello -

Some details first:

I have 4 image place holders. I have several checkboxes. Each checkbox is associated with an image. User is allowed to check off 4 boxes.

When a user clicks on a checkbox it replaces one of the image place holders with the image that was associated with the checkbox.

After the user checks off 4 of the check boxes, the rest of the checkboxes become disabled.

So now we have the 4 image place holders populated with images from the checked check boxes.

Here is where my issue comes into play.

If the user decides to uncheck a box, i need the correct place holder image to go back to it's generic place holder image.

So if the 4 checkboxes the user checked were 1: Hammer 2: Screwdriver 3: Nails 4: Saw. Those 4 place holder images would be populated with a Hammer, Screwdriver, Nails and a Saw. If they decide to uncheck the Screwdriver checkbox then that placeholder image with the screwdriver should switch to the generic place holder image.

I'm having a hard time figuring out how to do that.

thanks in advance!

Below is the function that I need help with. My main issue is that when I uncheck a box it removes the wrong image from the place holder. It should get the value of the box I just unchecked and then check that value against the 4 places holders and see which one matches it, then change that place holder back to the generic place holder imager.

function countChecked() {  
        
        var radioCandyCount = document.getElementsByName('HowManyCandies');

                 for (var i = 0, length = radioCandyCount.length; i < length; i++) {
                    if (radioCandyCount[i].checked) {
               
                    var a = radioCandyCount[i].value;
                    var b = "2";
                    var c = Number(a) + Number(b);


                                           
            var n = $("input:checked").length; 
            
            document.getElementById("CandyCount").value = Number(c) - Number(n)

                       /* **********  THIS IS THE SECTION I'M HAVING A PROBLEM WITH. ***************/
           
            if (document.getElementById("CandyCount").value == 4) {
                $('#Jar1').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                $('#Jar2').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                $('#Jar3').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                $('#Jar4').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                

            }
            if (document.getElementById("CandyCount").value == 3) {
               
                if ($(this).not(':checked')) {                

                    var unChecked = this.value;                 
                   

                    //alert($('#Jar1').css('backgroundImage') + "_" + "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");

                    if ($('#Jar1').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {
                        $('#Jar1').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                    if ($('#Jar2').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {
                        $('#Jar2').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                    if ($('#Jar3').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {
                        $('#Jar3').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                }


            }
            if (document.getElementById("CandyCount").value == 2) {
               
                if ($(this).not(':checked')) {
                   
                    var unChecked = this.value;
                    
                    if ($('#Jar1').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {
                        $('#Jar1').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                    if ($('#Jar2').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {
                        $('#Jar2').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                    
                }
               

            }
            if (document.getElementById("CandyCount").value == 1) {

                if ($(this).not(':checked')) {
                   
                  
                    var unChecked = this.value;
                   

                    if ($('#Jar1').css("backgroundImage") == "url(\"http://www.AWebSite.com/Test/Website/Images/" + unChecked + ".png\"" + ")");
                    {                       
                        $('#Jar1').css("background-image", "url(http://www.AWebSite.com/Test/Website/Images/SingleJar.png)");
                    }
                    
                }
               

            }

                        /* *****END*****  THIS IS THE SECTION I'M HAVING A PROBLEM WITH. *******END********/

                        /* **********  THIS IS THE SECTION THAT CHANGES THE PLACE HOLDER IMAGE TO THE CHECKBOX IMAGE. ***************/

            if (length == 3) {
                if (document.getElementById("CandyCount").value == 3) {
                    $(':checkbox(:checked)')                    
                        if (this.checked) {                         
                            var CandyChoice = "url(" + "http://www.AWebSite.com/Test/Website/Images/" + this.value + ".png )";                           
                            $('#Jar4').css("background-image", CandyChoice);
                        }
                   
                }
                if (document.getElementById("CandyCount").value == 2) {
                    $(':checkbox(:checked)')                    
                    if (this.checked) {   
                            var CandyChoice = "url(" + "http://www.AWebSite.com/Test/Website/Images/" + this.value + ".png )";                            
                            $('#Jar3').css("background-image", CandyChoice);
                        }
                   
                }
                if (document.getElementById("CandyCount").value == 1) {
                    $(':checkbox(:checked)')                    
                    if (this.checked) {   
                            var CandyChoice = "url(" + "http://www.AWebSite.com/Test/Website/Images/" + this.value + ".png )";                           
                            $('#Jar2').css("background-image", CandyChoice);
                        }
                  
                }
                if (document.getElementById("CandyCount").value == 0) {
                    $(':checkbox(:checked)')                    
                    if (this.checked) {   
                            var CandyChoice = "url(" + "http://www.AWebSite.com/Test/Website/Images/" + this.value + ".png )";                            
                            $('#Jar1').css("background-image", CandyChoice);
                        }
                
                }
            }

                        /* *****END*****  THIS IS THE SECTION THAT CHANGES THE PLACE HOLDER IMAGE TO THE CHECKBOX IMAGE. ********END*******/
                                    
             if (n == c)                                              
                {                                                        
                      $(':checkbox:not(:checked)').prop('disabled', true);
                     
                     document.getElementById('AddCart').style.display = 'inline';
                      $(document).scrollTop( $("#AddCart").offset().top );
                       $("#StepFourCheck").fadeIn('slow'); 
  
                 }                                                        
             else                                                     
                 {                                                        
               $(':checkbox:not(:checked)').prop('disabled', false); 
               
               document.getElementById('AddCart').style.display = 'none';
               document.getElementById('StepFourCheck').style.display = 'none';
               
               

                }
                }
                }
                }

Open in new window

0
Comment
Question by:JordanBlackler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 39179521
Check this if that can help : http://jsfiddle.net/d5PVp/1/
0
 

Author Comment

by:JordanBlackler
ID: 39179664
Hey thanks. I'm on the road right now, but will this work if each checkbox image is different?  

The place holder image will all be the same but each checkbox is associated with its own unique image.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39179670
yes, use a different class for each img but for each create one with the checked class
0
Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

 

Author Comment

by:JordanBlackler
ID: 39179700
thanks! Not to be a pain but would you be able to add one example to your jsfiddle code?
0
 

Author Comment

by:JordanBlackler
ID: 39179976
I tried to give each checkbox its own id with its own checked class. But no luck. I'm sure I'm doing something wrong. Do I have to change the jQuery as well?

Do you think you can alter your code to show me how each checkbox would associate with its own image when checked.  You don't have to do all 6 checkboxes, just a couple so I can get the gist of it.

I really appreciate any help, thanks!
0
 

Author Comment

by:JordanBlackler
ID: 39179983
I just noticed if there are more checkboxes then placeholder images, then the extra checkboxes does not change the place holder images.
0
 
LVL 2

Accepted Solution

by:
Immanuel Phillips earned 1000 total points
ID: 39192327
Here you go.. all javascript the same:

HTML:
<div id="placeholder1">
    <div class="barn"></div>
    <div class="smiley"></div>
    <div class="barn"></div>
    <div class="smiley"></div>
    <div class="barn"></div>
    <div class="smiley"></div>
</div>
<br />
<div id="placeholder2"><input type="checkbox" /><input type="checkbox" checked="checked" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /></div>

Open in new window


CSS:
#placeholder1 div {
    width:110px;
    height:110px;
    float:left;
}
#placeholder1 div.smiley {
    background:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTRGPMDp4dLP3jnJlWddy8mw8KmKM9o9_fwdMsF9cNpwObzU59b);
}
#placeholder1 div.barn {
    background:url(http://bestclipartblog.com/clipart-pics/barn-clip-art-10.gif);
}
#placeholder1 div.checked {
    background:url(http://files.suliujsag-gogo-lilla.webnode.hu/system_preview_small_200000148-8eba08fb42-public/szomi.jpg) !important;
}

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question