使用javascript检查复选框的按钮答案

【问题标题】：button checking a checkbox using javascript使用javascript检查复选框的按钮
【发布时间】：2013-03-29 22:54:35
【问题描述】：

我正在尝试制作一个可以在三种颜色之间切换的按钮：黑色、绿色和红色，并且会根据颜色选中某个框。现在我可以进行颜色切换，但不能检查复选框。我将不胜感激。我是初学者（显然）。

按钮颜色为绿色：复选框 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>

谢谢！

【问题讨论】：

标签： javascript forms button checkbox

【解决方案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.

【讨论】：

@Still：非常感谢！并且，用户 2128093：我很高兴能帮上忙！请，如果您认为这个（或任何其他）答案可以解决您的问题，请考虑接受（检查答案文本左侧的复选标记）。

【解决方案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;       
}

【讨论】：