gpt4 book ai didi

javascript - 选中复选框,自动更新复选框

转载 作者:行者123 更新时间:2023-12-04 19:46:20 26 4
gpt4 key购买 nike

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

最佳答案

检查这个伙伴。希望对您有所帮助。 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);
}

关于javascript - 选中复选框,自动更新复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16324123/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com