1

チェックボックスのチェック/チェック解除状態に基づいて、フォーム内の各チェックボックスのラベルの背景色を変更しようとしています。これまでのところ、最初は変更できましたが、チェックを外しても元に戻りません:

http://jsfiddle.net/7wnCL/4/

JavaScript:

function statecheck(layer) {
var myLayer = document.getElementById(layer);
 if(myLayer.checked = true){
 myLayer.style.backgroundColor = "#bff0a1";
 } else {
 myLayer.style.backgroundColor = "#eee";
 };
}

html:

<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>

CSS:

label {
margin:0px 2px 4px 2px; 
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
4

7 に答える 7

4

http://jsfiddle.net/7wnCL/20/

myLayer.checked = true

条件ではなく課題です。

if (myLayer.checked = true)

は毎回次のように評価されます

if (true)

そして、else の部分は決して実行されません。したがって、次のように変更します。

if (myLayer.checked === true)

また、チェックされたプロパティを持たないレイヤーではなく、入力をチェックする必要があります。

if (myLayer.childNodes[0].checked === true)
于 2013-05-21T21:02:30.287 に答える
1

非 jQuery ルート。statecheck 関数に 2 番目のパラメーターを渡します。

 <label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck(this,'AmericanSamoa')" />AS</label>

そしてジャバスクリプト

 function statecheck(chk, layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(chk.checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
    }
}

http://jsfiddle.net/7wnCL/4/

于 2013-05-21T21:10:52.823 に答える
1

あなたのスクリプトにはいくつかの間違いがあります。

  • ラベルIDを渡し、存在しないlabelId.checkedをチェックしています
  • == であるべき if 条件で = を使用しています

これは、JS メソッドがどのように見えるかです

function statecheck(layer, checkbox) {
    var myLayer = document.getElementById(layer);
    //myLayer.style.backgroundColor = "#bff0a1";
    if(checkbox.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };

}

HTML

<input type="checkbox" value="checkbox" onchange="statecheck('Alabama', this)" />
于 2013-05-21T21:15:08.747 に答える
1

あなたの役に立つ入力に基づく私の解決策：

function statecheck(layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(myLayer.childNodes[0].checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
};

}

http://jsfiddle.net/7wnCL/29/

于 2013-05-21T21:13:46.587 に答える
0

if ステートメントに equals がありません。タイプミスですか、それとも問題の解決策ですか?

于 2013-05-21T21:01:38.890 に答える
0

ラベルではなく、チェックボックスで色を設定しています。jQuery を使用すると、DOM 要素を簡単に選択/トラバースできます (また、多くの不要な ID をクリーンアップするのにも役立ちます)。このフィドルを参照してください。

http://jsfiddle.net/7wnCL/17/

$('input[type=checkbox]').change(function(){
    if($(this).prop('checked')){   
        $(this).parent().css('backgroundColor', '#bff0a1');
    }else{
        $(this).parent().css('backgroundColor', '#eee');        
    }
});
于 2013-05-21T21:07:53.890 に答える
0

他の人が言及した「==」のタイプミスに加えて、入力ではなくラベルがチェックされているかどうかもチェックしています。試す：

function statecheck(layer) {
    var myLayer = document.getElementById(layer),
        input = myLayer.getElementsByTagName('input')[0];
    //myLayer.style.backgroundColor = "#bff0a1";
    if(input.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };
}

jsFiddle: http://jsfiddle.net/7wnCL/26/

于 2013-05-21T21:08:40.433 に答える