0

黒、緑、赤の 3 色を切り替えて、色に応じて特定のボックスをチェックするボタンを作成しようとしています。現在、色を切り替えることはできますが、チェック ボックスをオンにすることはできません。助けていただければ幸いです。私は初心者です（当然）。

ボタンの色 緑: チェックボックス 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>

ありがとう！

4

2 に答える 2

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 フィドルのデモ。

于 2013-03-29T23:03:19.003 に答える
0

次のようにします。

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;       
}
于 2013-03-29T23:01:15.173 に答える