Javascript 为什么不'；这些CSS复选框不显示它们的记号吗？

我已经设置了我的复选框，它们看起来不错，尽管当我单击它们时，它们没有显示选中的属性。它们是使用Zend生成的，我不确定是否有一个属性可能会破坏样式，或者是否有我缺少的东西

为什么我单击复选框时，复选框不显示勾号

我正在使用“标签”复选框黑客，其中复选框是隐藏的，您可以设置标签样式，并且：选中属性，请查找下面的代码：

CSS:

Zend表格：

public function searchForm() {

        $this->removeDecorator('HtmlTag');
        $sp = $this->createElement('checkbox', 'sw')
                ->setOptions(
                array(
                    'label' => 'Swimming Pool',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');
        $spa = $this->createElement('checkbox', 'spa')
                ->setOptions(
                array(
                    'label' => 'Spa ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $gym = $this->createElement('checkbox', 'gym')
                ->setOptions(
                array(
                    'label' => 'Gym ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $wifi = $this->createElement('checkbox', 'wifi')

                        ->setOptions(
                                array(
                                    'label' => 'Wifi ',
                                    'class' => 'prettyCheckbox',
                                )

        )->removeDecorator('HtmlTag');

        $parking = $this->createElement('checkbox', 'parking')
                ->setOptions(
                array(
                    'label' => 'On-Site Parking ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $golf = $this->createElement('checkbox', 'golf')
                ->setOptions(
                array(
                    'label' => 'Golf ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $wp = $this->createElement('checkbox', 'wp')
                ->setOptions(
                array(
                    'label' => 'Wedding Packages ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $cc = $this->createElement('checkbox', 'cc')
                ->setOptions(
                array(
                    'label' => 'Civil Ceremonies ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $city = $this->createElement('checkbox', 'city')
                ->setOptions(
                array(
                    'label' => 'City Central ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $oot = $this->createElement('checkbox', 'oot')
                ->setOptions(
                array(
                    'label' => 'Out Of Town ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $disabled = $this->createElement('checkbox', 'disabled')
                ->setOptions(
                array(
                    'label' => 'Disabled Access ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $submit = $this->createElement('submit', 'submit')
                                ->setOptions
                                (array('label' => 'SEARCH OUR HOTELS',
                                       'class' => 'f-left btn-purple icon'
                                    ));

        $this->addElement($sp)
                ->addElement($spa)
                ->addElement($gym)
                ->addElement($wifi)
                ->addElement($parking)
                ->addElement($golf)
                ->addElement($wp)
                ->addElement($cc)
                ->addElement($city)
                ->addElement($oot)
                ->addElement($disabled)
                ->addElement($submit);
    }

}

正在输出此html标记的：

<div class="indexCheckbox">
                            <p class ="search-title">Facility Filter</p>
                            <form enctype="application/x-www-form-urlencoded" action="" method="post">
<dt id="sw-label"><label for="sw" class="optional">Swimming Pool</label></dt>

<input type="hidden" name="sw" value="0"><input type="checkbox" name="sw" id="sw" value="1" class="prettyCheckbox">
<dt id="spa-label"><label for="spa" class="optional">Spa</label></dt>

<input type="hidden" name="spa" value="0"><input type="checkbox" name="spa" id="spa" value="1" class="prettyCheckbox">
<dt id="gym-label"><label for="gym" class="optional">Gym</label></dt>

所以我知道样式是可行的，问题在于

input[type='checkbox']:checked + label:after 

你的HTML是

<label for="sw" ...><input type="checkbox" id="sw" ...>

当您将

标签移动到
复选框之后时，它将选择相应的标签

更新：

用
display:none
隐藏复选框在Firefox中不起作用；它确实和铬一起工作。您可以使用
可见性：hidden

input[type=checkbox] {
    visibility: hidden;
}

看到这个了吗

<label for="sw" ...><input type="checkbox" id="sw" ...>

input[type=checkbox]:checked + label:before {
...
}

input[type=checkbox] {
    visibility: hidden;
}