ラベル内の画像をクリックしない限り、IE onClickはチェックボックスをオンにしませんか？

私はラベルを持っています。このラベルの中には、イメージとテキストを含むdivがあります。 divには、javascript関数へのonClick呼び出しがあり、ラベル内のdivの色を変更し、チェックボックスをチェックします（何らかの理由でIEとFirefoxが正しくチェックしたくない、クロムがうまく機能しませんでした）。 Javascriptを：ラベル内の画像をクリックしない限り、IE onClickはチェックボックスをオンにしませんか？

<script language="javascript" type="text/javascript"> 
    function changecolor(id, chck1, firstcolor, secondcolor) 
       { 

        divid = document.getElementById(id); 
    chkboxid = document.getElementById(chck1); 
    if(chkboxid.checked){ 
        divid.style.background= firstcolor; 
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.indexOf('safari/') == -1){ 
    chkboxid.checked = false ; 
    } 
    } 
    else{ 
    divid.style.background= secondcolor; 
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.indexOf('safari/') == -1){ 
    chkboxid.checked = true ; 
    } 
    } 
       }

は、HTML：

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box"><label for="idbox"><div class="listing" onClick="changecolor('Test33', 'idbox', '#09C', '#0F0');" id="Test33">Another checkbox<img src="images/checkmark.png" height="80" width="80" /></div></label>

オクラホマので、それは、（まだ他のバージョンをテストしていない）、これはFirefox、およびクロムが、IE 7で正常に動作します使用してdiv内の画像をクリックするとチェックボックスのみがチェックされます。 div自体をクリックすると、背景色のみが変更されます。では、IEを動作させるための修正点は何ですか？divをクリックすると、チェックボックスもチェックされます。

出典

2009-08-27 John

ブラウザの検出コードを取り除き、すべてのブラウザでもう一度試してみてください。 –

検出コードを取り除くと、Chrome/Safariでは動作しません。 – John

ブラウザのすばらしいことの1つは、<label>の要素for usのクリックイベントがトリガーされていることです。

私は、チェックボックス自体にクリックハンドラを添付することをお勧めします。このようにして、あなたの機能はずっと簡単になります。

また、ブロックレベルの要素をラインレベルの要素の内側に配置することはできないため、<div>を<span>に変更し、CSSを使用してブロックレベルの要素としてレンダリングしました。

<html> 
<head> 

<script language="javascript" type="text/javascript"> 
    function changecolor(cbox, divId, firstcolor, secondcolor) 
    { 
    document.getElementById(divId).style.background = cbox.checked ? firstcolor : secondcolor; 
    } 
</script> 

<style type="text/css"> 
    span.listing { 
    display: block; 
    } 
</style> 

</head> 
<body> 

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box" onClick="changecolor(this, 'Test33', '#09C', '#0F0');"> 
<label for="idbox"> 
    <span class="listing" id="Test33"> 
    Another checkbox<img src="images/checkmark.png" height="80" width="80" onclick="this.parentNode.click()" /> 
    </span> 
</label> 

</body> 
</html>

出典

2009-08-27 18:06:26

これは、IEで画像をクリックしたときを除いて、onClick機能を実行しない限り、クリックしたスパンでなければなりません。そのため、正反対の問題で終了しました。 FirefoxとChromeの両方がこのソリューションで完璧に動作します。 – John

この場合の画像の問題はIEの問題に過ぎません。私はそれに対処することができます。ありがとう。 – John

私は誤ってそこにいくつかのデバッグコードを残していました。 IEで画像をクリックするように更新しました。 –

いくつかのコメントがそれを示唆しているが、トラブルシューティングの一環として、私は、チェックボックスを設定する前に警告を入れてしまうでしょう。

alert('test'); 
chkboxid.checked = true;

私は、警告が実行されず、ブラウザをチェックしているコードがIEとFFで異なって動作していることがわかります。

もしそうでなければ、アラートを動かすことで、なぜこれが動作しないのかを知ることができます。

出典

2009-08-27 18:10:01 Mayo

ラベル内の画像をクリックしない限り、IE onClickはチェックボックスをオンにしませんか？

答えて

関連する問題