Question

我正在尝试制作一个可在三种颜色之间切换的按钮：黑色，绿色和红色，并根据颜色检查某个框。现在我可以进行颜色切换，但我无法检查复选框。我很感激你的帮助。我是初学者（显然）。

按钮颜色为绿色：复选框1

按钮颜色为红色：复选框2

按钮颜色为黑色：不要选中方框1或2

脚本如下：

<script>
var colors = ["green", "red", "black"] 

function setColor(el) { 
el.colorIdx = el.colorIdx || 0; 
el.style.color = colors[el.colorIdx++ % colors.length]; 
}

</script>

HTML看起来像：

<html>
<button onclick="setColor(this)">This is my Button</button>
<input type="checkbox" name="box1" id="box1" />
<input type="checkbox" name="box2" id="box2" />  
</html>

谢谢！

Answer 1

我建议：

var colors = ["green", "red", "black"];

function setColor(el) {
    el.colorIdx = el.colorIdx || 0;
    el.style.color = colors[el.colorIdx++ % colors.length];
    document.getElementById('box1').checked = el.style.color == 'green';
    document.getElementById('box2').checked = el.style.color == 'red';
}

JS Fiddle demo

Answer 2

这样做：

var index = el.colorIdx++ % colors.length;
if( index == 2 ) //2 is the index of color black
{
  document.getElementById("box1").checked = false; 
  document.getElementById("box2").checked = false; 
}
else if( index == 0 )
{
   document.getElementById("box1").checked = true;     
}
else
{
   document.getElementById("box2").checked = true;       
}

按钮使用javascript检查复选框

2 个答案: