带有自定义图像的复选框不适用于IE

Question

我有一个带有自定义图像的复选框。它可以工作，可以点击，并且可以在除IE之外的所有浏览器上工作。

这是屏幕截图：

这是由Typo3和Powermail-Plugin生成的复选框的HTML。

<label class="checked">
  <input type="hidden" name="tx_powermail_pi1[field][marker_20]" value="">
  <input data-parsley-errors-container=".powermail_field_error_container_marker_20" 
data-parsley-class-handler=".powermail_fieldwrap_marker_20 
div:first > div" class="powermail_checkbox 
powermail_checkbox_172" id="powermail_field_marker_20_1" 
type="checkbox" name="tx_powermail_pi1[field][marker_20][]" 
value="Ich habe die <f:link.page pageUid=&quot;45&quot; target=&quot;_blank&quot;>Datenschutzerklärung</f:link.page> verstanden." data-parsley-multiple="tx_powermail_pi1fieldmarker_20">
  Ich habe die <a target="_blank" href="/datenschutz">Datenschutzerklärung</a> verstanden.
</label>

这是我用来切换它的jQuery：

$(".tx-powermail input[type=checkbox]:checked").parent("label").addClass("checked");
        $(".tx-powermail input[type=checkbox]").click(function() {
        $(this).parent("label").toggleClass("checked");
        });

似乎IE在Typo3生成的隐藏输入字段方面存在问题。我还有其他形式的复选框，其中缺少该隐藏的输入字段，因此输入类型复选框是标签的第一个子元素。

Answer 1

在这篇文章的帮助下，我自己可以解决此问题：https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/

如您所见，标签上没有“ for”属性。

因此，我编辑了typo3 powermail模板的复选框，并添加了“ for”。现在，我的复选框如下所示：

<label class="checked" for="powermail_field_aktivmitglied_1">

通过这种方式，它也可以在IE中工作。