签入复选框，自动更新复选框

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

Here是我的jsfiddle。

来源

2013-05-01 user2340414

您可以创建的jsfiddle？ – 2013-05-01 18:33:39

我只能使用JavaScript，HTML，CSS ... – user2340414 2013-05-01 18:42:04

@ user2340414不，请参阅http://jsfiddle.net/ – djechlin 2013-05-01 18:53:42

检查这一个好友。希望它有帮助。 jsfiddle

JAVASCRIPT：

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

来源

2013-05-01 21:10:04

Exxactly！完美的作品，我很感激！ – user2340414 2013-05-01 21:13:32

我的荣幸，很高兴帮助你。 – 2013-05-01 21:14:32

签入复选框，自动更新复选框

回答

相关问题