checked in checkbox, auto update in checkbox

Question

I'm beginner in JavaScript, and Stackoverflow, but I have a problem.

Following checkbox looks like this:

All dots, are bitmaps, When, I checked 3 options, all options have green bitmaps , but when I checked additionally another option, this option will be red bitmap.

And now when I unchecked one green option, red option should be automatic changed to green bitmap, but now when one green option will be unchecked, in checkbox are 2 greens, and 1 red, and should be 3 greens :(

here is my code:

JS function:

function change_src(ch,p){

            if(ch.checked == true){
                counter++;
                alert(counter);
                document.getElementById(p).src = "lamp2.png";

                if(counter>3){
                    document.getElementById(p).src = "lamp3.png";
                    alert(counter);
            }
            else{
                document.getElementById(p).src = "lamp2.png";
            }

Here is part my html code:

<body >
    <h1 id="title">
        Formularz</h1>
    <hr />
    <h2 id="title2">
        change 3 options</h2>
    <hr />
    <form id="blablal" action="index.htm" >
    <table class="center">
        <tr>
            <td>
                <div class='lamp'>
                    <img id="pic" name="pic1" src="lamp.png" alt="some_text"></div>
            </td>
            <td>
                C
            </td>
            <td>
                <input  id="Check_C" type="checkbox" onclick="change_src(this,'pic')"  /><br />
            </td>
        </tr>
        <tr>
            <td>
                <div class='lamp'>
                    <img id="pic2" name="pic2" src="lamp.png" alt="some_text"></div>
            </td>
            <td>
                C++
            </td>
            <td>
                <input  id="Check_Cpp" type="checkbox" onchange="change_src(this,'pic2')"/><br />
            </td>
        </tr>
        <tr>

Here is my jsfiddle.

Answer 1

Check this one buddy. Hope it's helpful. jsfiddle

var counter = 0;
var green = [];
var red = [];
function change_src(ch,p){

            if(ch.checked == true){
                counter++;

                if(green.length>=3){
                    red.push(p);
                    document.getElementById(p).src = "http://www25.speedyshare.com/8FpkJ/download/lamp3.png";                   
                }else{
                    green.push(p)
                    document.getElementById(p).src = "http://www22.speedyshare.com/ec8Da/download/lamp2.png";
                }
            }
            else{
                counter--;
                var indexGreen = green.indexOf(p);
                var indexRed = red.indexOf(p);
                if(indexGreen != -1){
                    green.splice(indexGreen, 1);
                }
                if(indexRed != -1){
                    red.splice(indexRed,1);
                }        
                document.getElementById(p).src = "http://www23.speedyshare.com/EHUe9/download/lamp.PNG";
                if(green.length<3 && red.length>0){
                    var item = red[0];
                    green.push(item);
                    red.splice(item,1);
                    document.getElementById(item).src = "http://www22.speedyshare.com/ec8Da/download/lamp2.png";
                }
            }
    alert("green: "+green+ " red: "+red);
}

checked in checkbox, auto update in checkbox

Question

1 answers

solution1
0 ACCPTED 2013-05-01 21:10:04

checked in checkbox, auto update in checkbox

Question

1 answers

solution1 0 ACCPTED 2013-05-01 21:10:04

solution1
0 ACCPTED 2013-05-01 21:10:04