漂亮的复选框 jQuery 选择器问题

Question

我试图用 div 内的阻止链接替换经典的默认复选框 - 它将显示为按钮，通过单击它会切换类。实际上切换类是有效的，但我还需要一个解决方案，如何切换 checked 属性。请参阅下面

这是我的 HTML 代码

<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" />
        <input name="IsLegalFirm" type="hidden" value="false" />
        <a href="#" class="checkbox selected">IsLegalFirm </a>
    </div>
</div>
<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" />
        <input name="IsTaxable" type="hidden" value="false" />
        <a href="#" class="checkbox selected">IsTaxable </a>
    </div>
</div>

隐藏的 input 之所以存在，是因为 ASP.NET MVC 在使用 Html.Checkbox() 帮助程序时引入了它。

这是我的 JS：

<script type="text/javascript">
    $(document).ready(function () {
        $(".checkbox").click(
        function (event) {
            event.preventDefault();
            $(this).toggleClass("selected");
                            // this needs a change 
            $(this).parent().find(":checkbox").attr("checked", "checked");
        });
    });
</script>

显然这只会打开 checked 但当它已经被选中时，它不会取消选中它。我相信它应该对两种输入都这样做。

有人可以帮助我找到正确的选择器/解决方案吗？

Answer 1

$(document).ready(function () {
    $(".checkbox").click(
    function (event) {
        event.preventDefault();
        $(this).toggleClass("selected");
        var realCheckbox = $(this).parent().find(":checkbox");
        // the problem with this line is that this only toggles the value 
        // of the checked attribute from checked="" to checked="checked"
        // and vice versa and I had problems with this in HTML5, 
        // so I rewrote it as below

        // realCheckbox.attr("checked", realCheckbox.is(":checked") ? "" : "checked");

        if (realCheckbox.is(":checked")) {
            realCheckbox.removeAttr("checked");
        }
        else {
            realCheckbox.attr("checked", "checked");
        }
    });
});

或者您可以只强制复选框的“click”事件，例如 realCheckbox.click()

Answer 2

不确定链接的目的，但传统上使用标签和 for 属性将文本绑定到复选框。这是一个示例：

<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" />
        <input name="IsLegalFirm" type="hidden" value="false" />
        <a href="#"><label for="IsLegalFirm" class="checkbox selected">IsLegalFirm </label></a>
    </div>
</div>
<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" />
        <input name="IsTaxable" type="hidden" value="false" />
        <a href="#"><label for="IsTaxable" class="checkbox selected">IsTaxable </label></a>
    </div>
</div>

我留下了您的链接。但是，如果您不需要它们，只需删除并保留标签即可。这是一个 jsFiddle 供您使用： http://jsfiddle.net/bK3ju/1/ 。请注意，不需要 JavaScript 即可将标签连接到复选框。

鲍勃