1

このチェックボックスを ie8 で動作させることができないようです。フォームで JS を使用していますが、JS が問題を引き起こしているとは思いません。これが ie7 で機能するかどうかは確認していませんが、他のすべての主要なブラウザーでは機能します。なぜそれがうまくいかないのか、誰にも考えがありますか？コードと実際の例を提供することはできません。

ライブ: http://jsbin.com/uburan/3/edit

マークアップ:

<script type="text/javascript">
function func()
{
var img1= document.getElementById("img1");

if(document.getElementById('interest1').checked)
{
    img1.src = "images/" + "internetbutton.gif";
    img1.name = "off";
}
else
{
    img1.src = "images/" + "internetbuttonchecked.gif";
    img1.name = "on";
}
}
</script>



</head>

<body>
<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="images/img1.jpg" width="781" height="800" onclick="func()" id="img1" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>
4

1 に答える 1

0

このスレッドが 1 年前のものであることは知っていますが、これに対する解決策を見つけました。

問題は、内の画像がlabelクリック イベントをキャッチし、それがラベルに渡されないことです。内の他のすべての要素labelはイベントを転送しますが、画像は転送しません。少なくとも IE ではそうではありません。

したがって、唯一できることは、 を使用して画像がクリック イベントを取得しないようにすることですpointer-events: none;。

次のようなフォームを想像してください(注: 入力要素がタグの外で使用されている場合、動作は発生しませんform!) :

<form>
    <input type="checkbox" name="interest1" id="interest1" value="1">
    <input type="checkbox" name="interest2" id="interest2" value="2">

    <label for="interest1" id="label-interest1"><img src="some/image1.jpg"/></label>
    <label for="interest2" id="label-interest2"><img src="some/image2.jpg"/></label>
</form>

CSS は次のようになります。

label {
    border:1px solid red;
    display:inline-block;
}
label > img {
    width: 100px;
    height: 100px;

    pointer-events: none;
}

実際の例はこちらにあります: http://jsbin.com/OxOlETU/2/edit

お気軽に、pointer-events: none;テスト目的で言っている行を削除してみてください。

編集 (2014/01/16):少しテストした後、これは IE バージョン 7、8、および11にのみ影響するようです。IE 9/10 では、画像を の中に入れ子にするlabelのが魅力的です。

于 2014-01-15T15:41:21.867 に答える