Javascript “签入”复选框，“自动更新”复选框_Javascript_Image_Checkbox

Javascript “签入”复选框，“自动更新”复选框

javascript image checkbox

Javascript “签入”复选框，“自动更新”复选框,javascript,image,checkbox,Javascript,Image,Checkbox,我是JavaScript和Stackoverflow的初学者，但我有一个问题以下复选框如下所示：所有的点都是位图，当我选中3个选项时，所有选项都有绿色位图，但当我另外选中另一个选项时，此选项将为红色位图现在，当我取消选中一个绿色选项时，红色选项应自动更改为绿色位图，但现在当取消选中一个绿色选项时，复选框中有2个绿色，1个红色，应为3个绿色：( 这是我的密码： JS功能： function change_src(ch,p){ if(ch.checked == t

我是JavaScript和Stackoverflow的初学者，但我有一个问题

以下复选框如下所示：

所有的点都是位图，当我选中3个选项时，所有选项都有绿色位图，但当我另外选中另一个选项时，此选项将为红色位图

现在，当我取消选中一个绿色选项时，红色选项应自动更改为绿色位图，但现在当取消选中一个绿色选项时，复选框中有2个绿色，1个红色，应为3个绿色：(

这是我的密码：

JS功能：

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";
            }

以下是我的html代码的一部分：

<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>


公式

更改3个选项

C


C++

这是我的JSFIDLE。

检查一下这个朋友。希望对你有帮助

JAVASCRIPT:

var计数器=0；
绿色变量=[]；
var-red=[]；
功能更改\u src（ch，p）{
如果（ch.checked==true）{
计数器++；
如果（绿色长度>=3）{
红色。推（p）；
document.getElementById（p）.src=”http://www25.speedyshare.com/8FpkJ/download/lamp3.png";                   
}否则{
绿色。推（p）
document.getElementById（p）.src=”http://www22.speedyshare.com/ec8Da/download/lamp2.png";
}
}
否则{
计数器--；
var indexGreen=green.indexOf（p）；
var indexRed=red.indexOf（p）；
如果（绿色索引！=-1）{
绿色。拼接（绿色索引，1）；
}
如果（索引红色！=-1）{
红色。拼接（索引红色，1）；
}        
document.getElementById（p）.src=”http://www23.speedyshare.com/EHUe9/download/lamp.PNG";
if（绿色。长度0）{
可变项目=红色[0]；
绿色。推送（项目）；
红色接头（第1项）；
document.getElementById（item）.src=”http://www22.speedyshare.com/ec8Da/download/lamp2.png";
}
}
警报（“绿色：+绿色+”红色：+红色）；
}

你能创建一个JSFIDLE吗？我只能使用JavaScript、HTML、CSS…@user2340414不，请参阅我为你创建的@user2340414，稍加修改。在你的帖子中更新会有帮助：啊，对不起。我之前不知道这个！现在我知道“JSFIDLE”是什么意思了…抱歉，但在代码中无法使用位图：-/这只是一个圆形，15px/15px，有三种颜色（白色、绿色、红色），但在JSFIDLE中不起作用。我不知道为什么！效果很好。我很感激！很高兴为您提供帮助。

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